Component

컴포넌트 생성

src 폴더에 임의의 js 파일을 생성하고, 아래와 같은 코드를 작성해 보자

(Hello.js)
function Hello() {
    return (
    <div>Hello, React!</div>
    )
    //div태그를 반환하는 JSX문법 사용!
}

export default Hello; 

return() 안에 두개의 html태그 나란히 적으면 안되고 하나의 태그로 시작해서 하나의 태그로 끝나야 한다.
export 키워드를 사용해 Hello함수를 내보내고 있고 다른 컴포넌트에서 불러와 한 단어로 깔끔하게 사용할 수 있다. 이러한 문법을 컴포넌트라고 한다. 아래에서 간단하게 사용 방법에 대해서 알아보자.

컴포넌트 사용

그렇다면 위에서 만든 컴포넌트를 App.js 에서 사용해보자.

(App.js)
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello /> //컴포넌트 사용!!!
    </div>
  );
}

export default App;

import로 ./Hello 라는 경로로부터 Hello라는 컴포넌트를 불러온다.
localhost:3000 페이지를 보면, Hello, React! 문자가 뜬걸 볼 수 있다.

간단히 정리
1. 컴포넌트를 만들 js 파일에 function을 이용해서 함수를 하나 만들고 작명 후 export
2. 그 함수 return 안에 html을 담음
3. 이제 원하는 js 파일에 import 후 <함수명/> 사용하면 됨

이렇게 축약한 덩어리를 컴포넌트라고 하고, 레이아웃을 바로 파악이 가능하니 나중에 관리하기도 편하겠죠?