Importing and Exporting Components

React에서 UI를 컴포넌트로 나누어서 사용했을 때의 가장 큰 장점은 재사용성이다. 그리고 한 컴포넌트는 다른 컴포넌트와의 중첩을 통해 만들 수 있다. 따라서 헷갈리지 않고, 깔끔하게 유지하기 위해 컴포넌트를 분할하고, 그 과정에서 각각의 컴포넌트는 다른 파일로 관리할 수 있다. 이렇게 다른 파일로 관리하게 될 때 한 컴포넌트에서 다른 컴포넌트를 사용하기 위해 그 컴포넌트를 가져와야 하고, 또 그 파일에선 해당 컴포넌트를 내보내야 다른 파일에서 가져올 수 있게 된다.

 

 

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

1. 컴포넌트를 넣을 새 JS 파일을 만든다.
2. 해당 파일에서 컴포넌트 함수를 내보낸다.
3. 컴포넌트를 사용할 파일로 해당 컴포넌트를 가져온다.

 

 

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

지금까지는 export default를 이용해서 한 파일에서 한가지 컴포넌트만 내보내왔다. 하지만 한 파일에서 여러 컴포넌트를 내보낼 수 있다. 그런데... 보통 그런 경우는 없고, 헷갈리게 만드니 그러지 말자...

지금까지 그렇게 사용했던 적은 styled-component를 다른 js 파일에 선언하고, 만든 css들을 내보낼 때 그렇게 해왔다.

이러한 경우가 아니라면 한 파일에서 하나만 내보내자.

 

알아둘것은 default는 파일에서 단 한번만 사용할 수 있고, 다른 것을 내보내고 싶다면 이름을 붙혀서 내보낼 수 있다. default를 사용해서 내보낸 것은 다른 파일에서 가져올 때 다른 이름으로 사용할 수 있지만, default를 사용하지 않은 것은 내보낸 파일에서 만든 함수의 이름으로만 사용가능하다.

 

• Gallery.js:
  • Profile 라고 이름이 붙혀진 컴포넌트를 Profile로 내보낸다.
  • Gallery 컴포넌트를 기본으로 내보낸다.
• App.js:
  • Gallery.js에서 Profile로 이름이 붙혀진 Profile 컴포넌트를 가져온다.
  • Gallery.js에서 기본으로 내보내진 Gallery를 가져온다.
  • 루트 App 컴포넌트를 기본 내보내기로 내보낸다.