컴포넌트의 장점은 재사용성에 있다. 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있지만 점점 많은 컴포넌트를 중첩할수록 다른 파일로 분리하는 것이 좋다.
루트 컴포넌트 파일
이전 게시물에서 프로필 컴포넌트와 그것을 렌더링하는 갤러리 컴포넌트를 만들었다. Create React App에서 앱은 src/App.js에 있지만 설정에 따라 루트 컴포넌트가 다른 파일에 있을 수도 있다.
나중에 랜딩 화면을 변경하여 과학 도서 목록을 넣거나, 모든 프로필을 다른 곳에 배치하려면 어떻게 할까?
갤러리와 프로필을 루트 컴포넌트 밖으로 옮기는 것이 좋다. 이렇게 하면 다른 파일에서 더 모듈화되고 재사용할 수 있다.
컴포넌트 옯기는 법
1. 컴포넌트를 넣을 새 JS파일을 만든다.
2. 해당 파일에서 함수 컴포넌트를 내보낸다. (export)
3. 컴포넌트를 사용할 파일에서 컴포넌트를 가져온다. (import)
그러면 App.js에 있는 Profile 컴포넌트와 그를 렌더링하는 Gallery 컴포넌트를 Gallery.js를 생성하여 그곳으로 옮겨 보자.
그리고 App.js가 루트 컴포넌트 파일이니 App.js에서 Gallery를 불러오도록 해보자.
위처럼 사용하려면 App.js에 Gallery.js파일이 import 되어있어야 한다.
정상적으로 잘 작동한다.
Deep Dive - 기본 내보내기와 지정된 내보내기
자바스크립트로 값을 내보내는 방법에는 기본 내보내기와 명명된 내보내기의 두 가지 주요 방법이 있다. 지금까지 한 것은 기본 내보내기이고, 동일한 파일에서 둘 중 하나 또는 둘다를 사용할 수 있다. 파일에는 기본 내보내기는 하나만 있을 수 있지만, 명명된 내보내기는 원하는 만큼 많이 있을 수 있다.
명명된(지정된) 내보내기를 사용하는 방법은 아래와 같이 컴포넌트에 export를 써 주는 것이다.
위와 같이 작성하면 불러오는 곳에서는 아래와 같이 import를 사용한다.
요약
1. 루트 컴포넌트 파일이란 무엇인가
2. 컴포넌트 가져오기, 내보내기
3. 기본 명명된 가져오기 및 내보내기
4. 동일한 파일에서 여러 컴포넌트를 내보내는 방법
