[React] 리액트 공식문서 스터디 - Describing the UI (2) Importing and Exporting Components

React 공식문서를 읽고 정리한 글입니다.

Describing the UI – React

The library for web and native user interfaces

https://react.dev/learn/describing-the-ui

Importing and Exporting Components

component 의 장점은 재사용성에 있다.

⇒ 다양한 component들로 구성된 component를 만들 수 있다.

하지만 component를 묶고, 또 구성하고 반복할 수록 다른 파일로 분리해야 한다는 것을 느끼기 마련이다.

파일을 읽기 쉬워지고, 더 많은 곳에서 component를 효율적으로 재사용할 수 있게 될 것이다.

The root component file

Your First Component 글에서 Profile component 와 이를 렌더링하는 Gallery component 를 만들었다.

https://codesandbox.io/embed/affectionate-tdd-tefyif?fontsize=14&hidenavigation=1&theme=dark

위의 요소들은 App.js 라는 이름의 root component file 에 있다.

Create React App 을 실행하면, app은 src/App.js 에 위치하게 된다.

물론 세팅에 따라 root component는 또 다른 파일에 위치할 수 있다.

• 예를 들어 Next.js 와 같은 file-based routing의 프레임워크를 사용한다면, root component는 모든 페이지에서 다를 것이다.

Exporting and importing a component

랜딩 화면을 바꾸고 싶다거나 어떠한 리스트를 만들고 싶다면 어떻게 하면 좋을까?

Gallery 와 Profile 을 root component 파일에서 분리하면 된다.

다른 파일에서 조금 더 모듈화되어 있고 재사용성 가능하게 해준다.

1. 새로운 JS 파일을 만들고 component들을 안에 기입한다.

2. 해당 파일로부터 function을 Export 한다. (default 또는 이름을 지어서)

3. 해당 component를 사용할 파일에서 이를 Import 한다. (default 또는 이름에 상응하도록)

Profile 과 Gallery 를 App.js 로부터 Gallery.js 파일로 이동시켰다.

Gallery.js 로부터 Gallery 를 import 해서 App.js 파일을 변화시킬 수 있다.

https://codesandbox.io/embed/youthful-worker-lv71nq?fontsize=14&hidenavigation=1&theme=dark

⇒ default import , default export 서로 맞추지 않으면 어떻게 되는지?

Uploaded by N2T