2화: Importing and Exporting Components

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Roshan Tmg 님 사진

공식 문서

https://react.dev/learn/importing-and-exporting-components

Importing and Exporting Components – React

루트 컴포넌트 파일

• CRA에서는 src/App.js
• Next.js 처럼 file-based routing을 사용한다면 각 페이지마다 루트 컴포넌트가 다를 수 있음

컴포넌트 내보내기/불러오기 과정

1. make

컴포넌트를 넣을 새 파일 만들기

 

2. export

새 파일에서 컴포넌트 내보내기 (default든 named든)

 

3. import

위에서 사용한 export 방법에 맞는 방식으로 컴포넌트를 사용할 곳에서 불러오기

import 확장자에 대해

import Sparrow from './components/Sparrow.js';

이런 식으로 파일 확장자를 붙이는 게 native ES module의 작동 방식에 더 맞다고는 함.

하지만 웹팩 설정같은 걸로 확장자 없이도 인식이 가능하게끔 할 수 있음.

default vs named exports

• 파일당 default export는 한 번만. named export는 하고 싶은 만큼 가능
• import 방법에서 차이가 있음
• 사람들은 보통(often) 파일에서 하나의 컴포넌트를 내보내면 default, 아니면 named를 씀
• 뭘 쓰든간에 컴포넌트와 그 파일에 의미있는 이름 붙이기
• 이름 없는 컴포넌트는 디버깅을 어렵게 만듦

같은 파일에서 여러 개의 컴포넌트 내보내기/불러오기

• 파일당 default export는 한 번만. named export는 하고 싶은 만큼 가능
• 팀바팀: default와 named export를 섞어 쓰면 헷갈릴 수 있음. 그래서 한 종류만 사용하거나, 한 파일에서 두 종류를 섞어 쓰지 않도록 컨벤션을 정하기도 함.

읽고 나서

개인적으로 named와 default export 사이의 차이가 궁금했다. 다행히 내가 아는 것 이상의 차이는 없었고, 이에 관해서 특별한 제약도 없는 것 같다. 내 기존의 기준은 'default가 가능하면 최대한 default 선호' 였기 때문에 이 부분을 이어가도 될 듯하다.