컴포넌트 import 및 export 하기

컴포넌트 import 및 export 하기

컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있습니다. 컴포넌트를 여러 번 중첩하게 되면 다른 파일로 분리해야 하는 시점이 생깁니다. 이렇게 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해집니다. 라고 문서에 나와 있다. 

 

어떻게 분리하는가?

자바스크립트에서 모듈 하는 방법과 동일하다.

파일을 따로 관리하여 해당 컴포넌트를 export(내보내기) 하고 원하는 곳에 둘때는 import (가져오기)를 하면된다. 

import Header from '../header/Header'

import * as S from './style'

import { Outlet } from 'react-router'

export default function Layout() {

  return (

    <S.Layout>

      <Header/>

      <Outlet />

    </S.Layout>

  )

}

import React from 'react'

import * as S from './style'

export default function Header() {

  return (

    <S.Header>

        <span>To Do List</span>

    </S.Header>

  )

}

 

Root Component

 

App.jsx 파일이 해당 루트 컴포넌트이며, 다른 컴포넌트의 감싸고 있는 컴포넌트, 그러니깐 최상위(?) 컴포넌트라고 생각하면된다. 

---

 

 Today I Learn...

• 나의 생각: export와 import 하는 방법을 모르는건 아니지만 다시 한번 상기하면서 docs 컴포넌트의 재사용성 많이 언급하는 거 같다. 잘 생각하고 컴포넌트화하는 연습도 필요하다 생각이 든다. 
• 느낀 점: 문서를 보다보면 요약이나 이런 부분이 잘되어 있어서 공부하기 편한거 같다. 
• 실제로 코드 쓸 때 든 생각: 분리해서 작성하면 관리라던가 가독성 측면에서 좋다라고 체감했다.
• 나에게 바라는 점:  컴포넌트는 재사용성을 고려를 많이 해봐야겠구나... 모두 그런건 아니겠지만