React 컴포넌트에 관하여

리액트는 컴포넌트 기반의 UI 라이브러리(Component-Based UI Library) 입니다.
페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 적절히 조합해서 페이지를 구성합니다.

리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만듭니다. 클래스로 컴포넌트를 만드는 방식은 함수로 만드는 컴포넌트에 비해 단점이 많아 지금은 선호하지 않습니다. 리액트 공식 문서에서도 이를 권장하고 있습니다.

함수 컴포넌트

function App() {
  return <div className="App"></div>;
}

export default App;

컴포넌트는, HTML 요소들을 return 하는 자바스크립트 함수를 말합니다.
그 중에서도 위처럼 함수 형태로 만들어진 컴포넌트를 함수 컴포넌트라고 합니다. 함수 컴포넌트는 화살표 함수로도 만들 수 있습니다.

함수 컴포넌트의 이름은 항상 대문자로 시작해야 합니다. 그 이유는 리액트 컴포넌트를 HTML 태그와 구분하기 위해서입니다.

계층 구조

const Header = () => {
  (...)
};

function App() {
  return (
    <>
      <Header />
    </>
  );
}
export default App;

위의 코드를 보면, App 컴포넌트가 Header 컴포넌트를 감싸고 있습니다. 이때 App처럼 다른 컴포넌트를 return 문 내부에 포함하는 컴포넌트를 ‘부모 컴포넌트’라고 합니다.
반대로 Header 처럼 App의 return 문에 포함된 컴포넌트를 ‘자식 컴포넌트’라고 합니다.
React에서 모든 컴포넌트는 App 컴포넌트 하위에 위치해야 렌더링할 수 있습니다.

컴포넌트별로 파일 분리하기

리액트에서는 보통 하나의 파일에 하나의 컴포넌트를 만듭니다. 하나의 파일에 여러 컴포넌트를 만들면 코드의 가독성이 떨어지기 때문입니다.

아래처럼 component라는 폴더를 만든 후 그 아래에 Header.js 파일을 생성합니다. 그후 Header 컴포넌트 부분을 잘라내어 붙여 줍니다.

function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  );
}

export default Header;

ES6-모듈 방법을 참고하여 Header를 내보내고, App 컴포넌트에서 import 해줍니다.

import Header from "./component/Header";

function App() {return (<><Header /></>);}
export default App;

🔗참고 자료
한 입 크기로 잘라먹는 리액트