<aside> 📌 Goal: 컴포넌트를 각각 다른 파일로 분리해보겠습니다.

</aside>

[목차]

1. 컴포넌트 분리해서 구현하기

우리는 지난 챕터에, <User /> 컴포넌트, <Button /> 컴포넌트의 관심사를 <App /> 컴포넌트에서 분리하고, 컴포넌트의 역할을 명확히 해주었기 때문에 <User /> 컴포넌트의 재사용성과 전체적인 가독성을 올릴 수 있었습니다.

그렇지만 현재 <App /> 컴포넌트와 <User /> 컴포넌트, <Button /> 컴포넌트가 모두 App.js라는 파일 한 곳에 작성되어 있기 때문에 발생하는 몇 가지 문제들이 있습니다.

  1. App.js 파일의 역할이 명확하지 않습니다.
  2. 컴포넌트 분리를 통해 가독성을 높였지만, 두 컴포넌트의 사이즈가 커지거나 혹은 또 다른 컴포넌트를 작성하게 된다면 가독성은 금방 떨어지게 될 것을 보입니다.
  3. 현재 프로젝트 구조에서, User 컴포넌트, Button 컴포넌트가 어디에 작성되어 있는지 찾기가 힘듭니다. 특히 작성자가 아닌 다른 개발자가 App.js 파일을 보고 User 컴포넌트, Button 컴포넌트가 해당 파일에 작성되어 있다고 유추하기 쉽지 않아 보입니다.

우리는 일반적으로, 계속 여러번 렌더링하여, 기능을 재사용하는 컴포넌트들은 따로 분리해서 사용합니다. User 라는 이름의 컴포넌트로 분리해보겠습니다.

<aside> 💡 하나의 폴더 안에 모든 컴포넌트를 만들어서 관리하면 시간이 흐를수록 컴포넌트가 많아져서 원하는 컴포넌트를 찾기가 힘들어질 것입니다. 그래서 연관된 컴포넌트끼리 폴더를 만들어서 관리하는 것이 컴포넌트를 찾기에 수월합니다.

</aside>

<Button /> 컴포넌트를 예시로 파일을 나누는 실습을 해보겠습니다.

스크린샷 2022-10-28 오후 2.42.15.png

  1. src에 오른쪽 마우스를 눌러서 new folder로 components라는 폴더를 만들어 줍니다.
  2. components 폴더에 Button.js 파일을 만들어 줍니다.
  3. App.js에서 작성한 Button 컴포넌트를 Button.js로 옮겨줍니다.
// 경로: src/components/Button.js

function Button(props) {
  switch (props.color) {
    case 'green': {
      return (
        <button
          style={{ background: 'green', color: 'white' }}
          onClick={props.onClick}
        >
          {props.children}
        </button>
      );
    }
    case 'red': {
      return (
        <button
          style={{ background: 'red', color: 'white' }}
          onClick={props.onClick}
        >
          {props.children}
        </button>
      );
    }
    default: {
      return <button onClick={props.onClick}>{props.children}</button>;
    }
  }
}

export default Button;

// 💡💡 외부 모듈(파일)에서 Sqaure 컴포넌트를 사용할 수 있게 export(내보내기)해줘야 한다.