[React] 9. 컴포넌트 분리하기

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

-> App.js에서 import 해줘야한다!

# src/components/Button.js

// 버튼 컴포넌트 분리 (분리 시 CSS하기 더 편함)
function CustomButton(props) {
    const { color, onClick, children } = props
    
    if (color)
      return (
        <button
          style={{ background: color, color: "white" }}
          onClick={onClick}>
          {children}
        </button>
      );
    return <button onClick={onclick}>{props.children}</button>;
}

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

# src/components/User.js

// 삭제 User 컴포넌트 분리
import CustomButton from "./Button.js";

const User = (props) => {
    return (
      <div className="user-card">
        <div>{props.user.age}살 - {props.user.name}</div>
        {/* 버튼 컴포넌트로 바꾸기 */}
        <CustomButton color="red" onClick={() => props.handleDelete(props.user.id)}>
          삭제
        </CustomButton>
      </div>
    );
}

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

export & export default

둘 다 모듈을 내보내고 불러오는 방법
모듈은 크게 두 종류로 나뉜다.
1. 복수의 함수가 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어있는 모듈
대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현된다.
그런데 이렇게 모듈을 만들다보면 자연스레 파일 개수가 많아질 수 밖에 없다.
그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않는다.
모듈은 export default 라는 특별한 문법을 지원한다.
export default를 사용하면 '해당 모듈엔 개체가 하나만 있다'는 사실을 명확히 나타낼 수 있다.

파일 하나엔 대개 export default가 하나만 있다.
이렇게 default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있다. (import 시)
반면, 단순 export로 선언한 모듈은 중괄호 {}를 반드시 사용해야 한다.

# example
import App from "./App";
import { Sample1, Sample2 } from "./Sample";