#04-02. Component를 만들어보자

생성되어있는 App.js에 컴포넌트를 추가하여 화면을 그리는 간단한 작업을 수행하겠습니다. 

 

src 폴더 하위에 component 폴더를 생성합니다. 

새로 생성한 component하위에 3개의 compoent 를 생성할 계획입니다. 

• Greeting.js
• Money.js
• Welcome.js

 

 

 

 

 

 

Greeting.js 

export default function Greeting(){
    return <h2>Greeting!!!</h2>
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

참고. Component를 작성할때 작성 방법

//방법 1
export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

//방법 2
const Welcome = function(){
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

//방법 3
const Welcome = () => {
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

 

 

이렇게 작성된 두개의 Component를 App.js에서 사용해 보겠습니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';
import Welcome from './component/Welcome';
function App() {
  return (
    <div className="App">
      <Greeting />
      <Welcome/>
    </div>
  );
}

export default App;

실행된 화면

이번에는 Welcome안에 Money를 넣어서 화면을 구성하도록 하겠습니다. 

 

Moneny.js 를 작성합니다. 

export default function Money(){
    return <h3>Money</h3>
}

Welcome.js를 아래와 같이 수정합니다.

import Money from './Money'

export default function Welcome(){
    return (
        <h2>Welcome !!</h2>   
        <Money/>
    )
}

그리고 저장을 하면 아래와 같이 오류가 발생합니다. 

JSX는 return할때 한개의 Object만 return할 수 있습니다. 

즉, Welcome의 <h2>와 <Money/> 안에 있는 <h3>가 리턴되어 2개의 Object가 리턴됨으로서 오류가 발생했습니다. 

 

Welcome.js의 코드를 아래와 같이 수정합니다. 

import Money from './Money'

export default function Welcome(){
    return (
        <abcd>
        <h2>Welcome !!</h2>   
        <Money/>
        </abcd>
    )
}

<abcd>를 추가하여 한개의 Object로 변경하여 retrurn되도록 수정하면 정상적으로 화면이 실행됩니다.