useContext (ContextAPI) 란?

 

리액트의 기본적인 데이터 흐름은 

 

부모 컴포넌트에서 자식 컴포넌트에 Props를 전달해주는 형식임.

 

프로젝트의 규모가 커지면 커질 수록 컴포넌트는 많아질 것이며, 이에 전부 props로 대처할 수는 없음.

 

또한 어디 한 군데에서 문제가 생긴다면 모든 부모 컴포넌트를 찾아다니며 수정해줄 수가 없음.

 

이를 해결하기 위해 Context를 제공해줌.

 

이는 props로 내려줄 필요가 없는 방법.

props drilling이 일어나지 않는다는 장점이 있지만, 

공식문서에는 props drilling을 피하기 위한 목적이라면 컴포넌트 합성을 먼저 고려하라는 이야기가 나옴

 

 

여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있습니다.

https://ko.legacy.reactjs.org/docs/context.html

Context – React

 

이는 Context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문.

 

다른 단점으로는 하나의 context가 변경되면, 이를 사용하는 모든 컴포넌트가 리렌더링이 된다는 것.

 

 

사용법

import {createContext} from 'react'

export const 예시Context = createContext(초기값)

.
.
.

return (
	<예시Context.Provider value={전달하고자 하는 값}>
    		<context가 필요한 컴포넌트>
   	 </예시Context.Provider>
)

 

 

사용하는 쪽에서

const 어쩌구 = useContext(아까 만들어둔 예시Context)

 

비교적 사용법은 간단한 듯 보이기도 한다.

 

 

그러나 위에서 언급했듯, context를 사용하는 모든 곳에서의 리렌더링을 피하기 위해 useMemo를 사용해주는 것도 또한 좋음.

 

context를 보다 효율적으로 사용하기 위해서는, provider로 감싸는 부분의 단위가 크면 안된다는 것.

스승같은 친구에게 물어보니, page 단위로 provider를 감싸는 것은 단위가 크다고 볼 수 있음.

단순 편하게 라우터에서 페이지 단위로 provider를 사용하면 나중에 유지보수 시 provider hell이 발생할 수 있음.

이번 프로젝트 코드 예시

{
        path: '/onboarding',
        element: (
          <PreviewImageProvider>
            <OnboardingProvider>
              <OnBoardingPage />
            </OnboardingProvider>
          </PreviewImageProvider>
        ),
      },
      
      한 페이지에 2개의 provider로 감싸져 있는 모습이다.
      
      이렇게 사용하지 않고 더 작은 단위로 사용해야 한다!

 

이 provider hell을 피하기 위해서

더 작게, 더 잘게 감싸서 사용하는 것이 팁!

 

만약 어쩔 수 없이 큰 단위로 context를 사용해야만 하는 상황이라면, 전역 상태 라이브러리를 사용하는 것도 좋음.

 

Context 를 꼭 전역적인 값을 위해서만 쓴다는 생각을 버리고,

props가 아닌 다른 방식으로 데이터를 전달하는 방법 중 하나라는 생각으로 사용한다면 더욱 유용하게 사용할 수 있음.