컴포넌트의 가장 큰 장점은 "재사용성"
컴포넌트들을 조합해서 또 다른 컴포넌트를 만들어낼 수도 있다.
하지만 여러 컴포넌트를 한 파일에 적다보면, 크기가 커지고 복잡해질수록 파일을 분리해야 하는 시점이 온다.
분리를 통해 추후 파일을 찾기가 더 쉽고 재사용하기에도 더 편리해진다.
학습 내용
- Root 컴포넌트란
- 컴포넌트를 import 하거나 export 하는 방법
- 언제 default 또는 named imports와 exports를 사용할지
- 한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법
- 여러 컴포넌트를 여러 파일로 분리하는 방법
Root 컴포넌트란
App.js와 같이 최상위 컴포넌트 파일에 존재하는 컴포넌트가 바로 루트 컴포넌트.
Next.js처럼 파일 기반으로 라우팅하는 프레임워크의 경우 페이지별로 root 컴포넌트가 다를 수 있다.
src/app/page.tsx,src/app/post/page.tsx,src/app/user/page.tsx등
컴포넌트를 import, export하는 방법
만약 그려내고자 하는 화면에 변경사항이 생겨서 해당 페이지에 있는 컴포넌트를 다른 곳에서 사용하게 된다면 그 컴포넌트 코드를 그대로 복사해서 또 사용하고자 하는 곳의 파일에 붙여넣기 할 것인가?
위 방법은 매우 번거롭고 재사용성도 좋지 않다. 리액트의 컴포넌트의 장점을 온전히 누리지 못하는 것이다.
재사용성을 높이기 위해서는 root 컴포넌트로가 아닌 다른 파일로 해당 컴포넌트들을 옮긴 후, 그 파일에서 export로 내보낸 뒤, root 컴포넌트에서 import로 끌어와서 쓰면 재사용성이 높아져 컴포너트를 모듈로 사용할 수 있다.
이렇게 컴포넌트를 다른 파일로 이동하려면 세 가지 단계를 거친다.
- 컴포넌트를 추가할 새로운 파일을 생성한다. (js, tsx)
- 새로 만든 파일에서 함수 컴포넌트를 export한다. (default 또는 named 방식. 이후 추가 설명)
- 컴포넌트를 사용할 파일에서 import 한다.
아래는 이전 포스트의 예제 코드이다.
// App.js
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}보다시피 App.js 파일 안에 Profile 컴포넌트와 Gallery가 바로 작성되어 있다.
App.js에서 분리된 Gallery.js 파일을 만들어서 이 두 컴포넌트를 고대로 옮겨,
루트 파일인 App.js로 부터 분리 시켜보자.
//App.js
import Gallery from './Gallery.js';
export default function App () {
return (
<Gallery />
);
}초~깔~끔~🌿
Gallery.js
Profile 컴포넌트는 해당 파일안에 있는Gallery 컴포넌트에서만 사용되기 때문에 export하지 않는다.- Default 방식으로
Gallery 컴포넌트를 export해준다.
App.js
- Default 방식으로
Gallery 컴포넌트를Gallery.js파일로부터 import해준다. - Root App 컴포넌트를 default 방식으로 export 한다.
Deep Dive - Default와 Named Exports
아까부터 계속해서 default가 계속해서 나오는데, 이건 대체 뭘 의미할까?
보통 자바스크립트에서는 default와 named export라는 두 가지 방법으로 값을 export한다.
두 방법 다 한 파일 내에서 사용할 수도 있다.
다만, 한 파일에서 default 값으로 export되는 것은 딱 하나만 존재할 수 있다. (당연함. 디폴트임)
이와 달리 named export는 여러 개가 존재할 수 있다.
export 하는 방식에 따라 import 하는 방식이 정해져 있다. default export 한 값을 named import로 가져오려고 한다면, 에러가 발생한다. 짝을 잘 맞춰서 작성해주자.
default import를 사용하는 경우에는 import Banana from './button.js' 라고 작성해도 같은 default export 값을 가져온다.
따라서 원한다면 다른 이름으로 값을 가져올 수 있다. (가져오면서 개명 시켜주는 느낌)
반대로 named import를 사용하면 양쪽 파일에서 동일한 이름으로 작성해주어야 한다. (그래서 named 라고 불린다.)
보편적으로 한 파일에서 하나의 컴포넌트만 export할 때 default export 방식, 여러 컴포넌트를 export 할 때 named export 방식을 사용한다. 추후 디버깅의 편리성을 위해 어떤 방식을 사용하든 컴포넌트와 파일의 이름을 의미있게 명명하는 것은 중요하다.
한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법
만약 위 예시 코드에서 Profile이 3번 반복 출력될 필요 없이 한번만 그리면 돼서 Gallery 컴포넌트가 아닌 Profile 컴포넌트를 사용하고자 한다면 어떻게 해주면 될까?
- Gallery 컴포넌트가 이미 default export 되고 있기 때문에 named export로 Profile 컴포넌트를 내보낸다.
//Gallery.js
export function Profile() { // named export
// ...
}
//App.js
import { Profile } from './Gallery.js'; // named import
export default function App() {
return <Profile />;
}- Gallery.js에서 Profile.js로 Profile 컴포넌트를 분리시켜 그 파일에서 default export 한다.
이 경우 각각의 파일이 단일 역할만을 가지게 된다. 이를 통해 각 파일의 역할이 헷갈리지 않고 명확해진다. (관심사 분리)
//Profile.js
export default function Profile () { // default export
// ...
}
//App.js
import Profile from './Profile.js'; // default import
export default function App() {
return <Profile />;
}
//Gallery.js
import Profile from './Profile.js'; // default import
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}출처: 리액트 공식문서 (https://ko.react.dev/learn/importing-and-exporting-components)
