리액트 공식 문서 번역-02. 컴포넌트 가져오기 및 내보내기

React는 사용자 인터페이스(UI)를 렌더링하는 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이러한 작은 단위를 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트에서부터 전화 앱에 이르기까지, 화면에 표시되는 모든 것을 구성 요소로 분해할 수 있습니다. 이 장에서는 React 컴포넌트를 생성하고 사용자 정의하며, 조건에 따라 표시하는 방법을 배우게 됩니다.

 

첫 번째 컴포넌트

리액트 애플리케이션은 컴포넌트라 불리는 UI의 격리된 부분들로 구성됩니다. 리액트 컴포넌트는 마크업으로 구성된 일종의 자바스크립트 함수입니다. 컴포넌트는 버튼과 같은 작은 부분부터 전체 페이지까지 다양한 크기와 형태를 가질 수 있습니다. 아래는 세 개의 Profile 컴포넌트를 렌더링하는 Gallery 컴포넌트 예시입니다.

 

https://codesandbox.io/s/zd7vzo?file=/App.js&utm_medium=sandpack

nifty-waterfall-zd7vzo - CodeSandbox

 

컴포넌트 가져오기와 내보내기

하나의 파일에서 많은 컴포넌트를 선언할 수 있지만, 파일이 커지면 탐색하기 어려울 수 있습니다. 이를 해결하기 위해 컴포넌트를 개별 파일로 내보내고 다른 파일에서 해당 컴포넌트를 가져올 수 있습니다

 

https://codesandbox.io/s/4ww9y5?file=/Gallery.js&utm_medium=sandpack

gifted-ace-4ww9y5 - CodeSandbox

 

다음과 같이 .js 파일 확장자를 생략한 파일을 만날 수 있습니다

 

import Gallery from './Gallery';

 

React에서는 './Gallery.js' 또는 './Gallery' 둘 다 작동하지만, 전자는 기본 ES 모듈 작동 방식과 더 가깝습니다.

 

 

기본 내보내기 vs 명명된 내보내기

JavaScript에서 값들을 내보내는 데에는 두 가지 주요 방법이 있습니다: 기본 내보내기(default exports)와 명명된 내보내기(named exports). 지금까지의 예제에서는 기본 내보내기만 사용했습니다. 그러나 같은 파일에서 하나 이상의 내보내기를 사용할 수 있습니다. 파일당 기본 내보내기는 하나만 가질 수 있지만, 명명된 내보내기는 원하는 만큼 가질 수 있습니다.

컴포넌트를 내보내는 방식에 따라 가져와야 하는 방식이 결정됩니다. 기본 내보내기(default export)를 명명된 내보내기(named export)처럼 가져오려고 시도하면 오류가 발생합니다! 이 차트는 이를 추적하는 데 도움이 됩니다

Syntax	Export statement	Import statement
Default	export default function Button() {}	import Button from './button.js';
Named	export function Button() {}	import { Button } from './button.js';

 

default import를 작성할 때 import 뒤에 원하는 이름을 붙일 수 있습니다. 예를 들어, import Banana from './button.js'와 같이 작성하여도 동일한 default export를 제공합니다. 반면에, named imports는 이름이 양쪽에서 일치해야 합니다. 이것이 named imports라고 불리는 이유입니다!

파일이 하나의 컴포넌트만 내보내는 경우 default exports를 사용하고, 여러 컴포넌트와 값을 내보내는 경우 named exports를 사용하는 경향이 있습니다. 어떤 코딩 스타일을 선호하더라도, 항상 의미 있는 이름을 컴포넌트 함수와 해당 함수를 포함하는 파일에 지정해 주세요. 이름이 없는 컴포넌트, 예를 들면 export default () => {}와 같은 것은 디버깅을 어렵게 만들기 때문에 권장하지 않습니다.

 

동일한 파일에서 여러 컴포넌트 내보내기와 가져오기

만약 갤러리 대신 하나의 프로필만 보여주고 싶다면 어떻게 해야 할까요? 이 경우, Profile 컴포넌트도 export할 수 있습니다. 하지만 Gallery.js에는 이미 default export가 있기 때문에 두 개의 default export를 가질 수는 없습니다. 새로운 파일을 생성하거나, Profile을 위한 named export를 추가할 수 있습니다. 파일은 오직 하나의 default export만 가질 수 있지만, 많은 named export를 가질 수 있습니다!

 

💡 기본(default) 익스포트와 이름이 지정된(named) 익스포트 사이의 혼동을 줄이기 위해 일부 팀은 하나의 스타일(default 또는 named)만 사용하거나 단일 파일에서 혼합하는 것을 피하기도 합니다. 당신이 최선으로 생각하는 방법을 사용하세요!

 

먼저, default 키워드 없이 named export를 사용하여 Profile을 Gallery.js에서 export합니다.

 

export function Profile() {
  // ...
}

 

그 다음, App.js에서 중괄호(curly braces)로 named import를 사용하여 Gallery.js에서 Profile을 가져와주세요

 

import { Profile } from './Gallery.js';

 

마지막으로, App 컴포넌트에서 <Profile />을 렌더링하세요

 

export default function App() {
  return <Profile />;
}

 

이제 Gallery.js에는 default로 내보낸 Gallery와 named로 내보낸 Profile 두 가지가 있습니다. App.js는 두 가지를 모두 가져옵니다. 이 예제에서 <Profile />를 <Gallery />로 편집하거나 다시 편집해보세요

 

https://codesandbox.io/s/7gzrzk?file=/App.js&utm_medium=sandpack

sleepy-maxwell-7gzrzk - CodeSandbox

 

이제 당신은 디폴트 익스포트와 네임드 익스포트를 혼합해서 사용하고 있습니다.

 

• Gallery.js:
  • Profile이라는 이름으로 네임드 익스포트로 Profile 컴포넌트를 내보냅니다.
  • Gallery 컴포넌트를 디폴트 익스포트로 내보냅니다.
• App.js:
  • Gallery.js에서 네임드 임포트로 Profile을 Profile이라는 이름으로 가져옵니다.
  • Gallery.js에서 디폴트 임포트로 Gallery를 가져옵니다.
  • 루트 App 컴포넌트를 디폴트 익스포트로 내보냅니다.

 

요약

이 페이지에서 배운 내용:

• 루트 컴포넌트 파일이란 무엇인지
• 컴포넌트를 가져오고 내보내는 방법
• default와 named import 및 export를 언제 어떻게 사용하는지
• 동일한 파일에서 여러 컴포넌트를 내보내는 방법

 

2023.07.09 - [React/Documentation] - 리액트 공식 문서 번역-03. JSX로 마크업 작성하기

리액트 공식 문서 번역-03. JSX로 마크업 작성하기