Coding/React

컴포넌트 import, export / Default, Named Export

민톨이 2024. 3. 5. 14:37
728x90

컴포넌트 import, export

  • 재사용하려면 컴포넌트가 파일로 분리되어 있어야함
  • 파일 = 모듈이며 es모듈로 파일간 접근가능
  • Gallery.jsx 파일 생성함수컴포넌트 default로 export하면 import시 이름 변경가능
  • 상대경로(./ 생략불가)로 컴포넌트 import, 확장자는 생략가능하지만 명시하는게 좋음

Default와 Named Export

  • 한 파일에는 하나의 export default만 존재해야하며 부모함수컴포넌트는 export default하여 import시 {}없이 가져오며 이름변경가능
  • named export는 최상위(파일) 레벨에서만 가능하며 import시 { 변수명, 함수명 as 함수명2}로 가져오며 as로 이름변경가능
  • 일반적으로 한파일에서 하나의 컴포넌트를 export default하며 여러 컴포넌트일 경우 named export사용