[React] Context API를 사용하기 전에 고려할 점

어떠한 props를 여러 레벨 깊이로 전달해야 한다고 해서 꼭 context api를 사용해야 하는 것은 아닙니다.

 

props가 여러 컴포넌트를 지나가는 것은 어떤 컴포넌트가 어떤 데이터를 사용하는지 명확히 보여줍니다.

데이터의 흐름이 props를 통해 분명해져 유지보수 하기에도 좋습니다.

 

JSX의 children으로 props를 전달하면 level을 줄일 수 있습니다.

// JSX children 사용 전
<Layout posts={posts} />

// JSX children 사용 후
<Layout><Posts posts={posts} /><Layout>

 

상태를 변경할 때마다 재랜더링이 되기 때문에 상태 변경이 적은 기능에 context api를 적용하는 것이 좋습니다.

• 테마 (다크 모드)
• 로그인 (계정 세션)

 

Context API 사용 방법

// MyContext.js
export const MyContext = createContext(기본값)

export const MyContext = ({children}) => {
  // 변경할 상태를 생성해서 전달할 수 있습니다.

  return (
    <MyContext.Provider value={전달할 값}>
      {children}
    </MyContext.provider>
  )
}

// context api를 사용할 위치
const contextValue = useContext(MyContext)

// App.jsx
<MyContext>
  <Header />
  <Main />
  <Footer />
</MyContext>