컴포넌트 import 및 export 하기

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/importing-and-exporting-components

Root 컴포넌트란

첫 컴포넌트에서 만든 Profile 컴포넌트와 Gallery 컴포넌트는 아래와 같이 렌더링 됩니다.

https://codesandbox.io/embed/xgy8t9?view=editor+%2B+preview

1️⃣ 기본 Root 컴포넌트

• 일반적으로 모든 컴포넌트는 App.js에 포함됨
• 프로젝트 설정에 따라 root 컴포넌트가 다른 파일에 위치할 수 있음

2️⃣ 파일 기반 라우팅 프레임워크

• Next.js처럼 파일 기반 라우팅을 사용하는 경우, 페이지별로 root 컴포넌트가 다를 수 있음
• 예를 들어, pages/index.js, pages/about.js 등이 각 페이지의 root 역할을 할 수 있음

컴포넌트를 import 하거나 export 하는 방법

1️⃣ 컴포넌트를 별도 파일로 분리하는 이유

• 랜딩 화면을 변경할 때 과학자가 아닌 과학책을 표시하도록 수정 가능
• 프로필 사진을 다른 곳에서 사용하려면 Profile 컴포넌트를 독립된 파일로 분리하는 것이 유리
• 컴포넌트를 분리하면 재사용성이 높아지고 모듈화가 쉬워짐

2️⃣ 컴포넌트를 분리하는 3단계

• 새로운 JS 파일 생성
• 컴포넌트를 export (default 또는 named export 사용)