Context API 이용하기

Context란?

React v16 부터 도입된 내장 API 이며, 컴포넌트간에 Props로 데이터를 전달하지 않고 데이터를 공유할 수 있게 해주는 기술이다.

 

하지만 착각하기 쉬운 것이 있다. Context API는 "상태관리"를 해주는 기술이 아니다. 정확히는 상태를 쉽게 "공유" 할 수 있게 해주는 다리와 같은 역활이다. 이는 컴포넌트간 Props로 계속해서 전달하는 Prop Drilling을 피할 수 있으며, 깊이와 무관하게 데이터가 필요한 컴포넌트에서 불러 데이터를 사용할 수 있게 된다.

 

 

Context 생성

Context를 사용하려면 React의 createContext를 이용해 Context를 생성해 준다. createContext의 인수로 초기값이 전달된다. 또한 Provider의 value로 전달되는 값은 실질적으로 다른 컴포넌트에서 접근할 수 있게 해줄 상태 혹은 세터 함수를 전달한다.

const Context = createContext();

const Provider = ({ children }) => {
  const [count, setcount] = useState(0);

  return (
    <Context.Provider value={{ count, setcount }}>
      {children}
    </Context.Provider>
  )
}

 

 

Provider 설정

Context를 사용할 Provider 컴포넌트를 설정해준다.

const App = () => {
  return (
    <Provider>
      <UseCounter />
    </Provider>
  );
}

 

 

커스텀 훅 생성

상태를 사용하는 컴포넌트에서 컨텍스트를 찾지 못한다면 에러를 날려줄 커스텀 훅을 생성해준다.

const useCounterContext = () => {
  const context = useContext(Context);
  if (!context) {
    throw new Error('useCounterContext must be used within a CounterContextProvider');
  }
  return context;
}

 

이때 useContext(Context)를 통해 우리가 관리할 컨텍스트를 지정해 생성되지 않았다면 에러를 날려주도록 설계하자.

 

 

상태를 사용

이제 생성된 상태를 한번 다른 컴포넌트에서 사용해보도록 하자.

const UseCounter = () => {
  const { count, setcount } = useCounterContext();

  return (
    <div style={{margin: '100px'}}>
      <span style={{ margin: '10px' }}>{count}</span>
      <button onClick={() => setcount(count + 1)}>Click</button>
      <button onClick={() => setcount(0)}>Reset</button>
    </div>
  )
}

 

이때 주의해야할 점은 value로 전달되는 이름과 동일하게 사용을 해줘야한다.

이번 코딩테스트에서 이것 때문에 시간을 많이 잡아 먹어서 완성을 못했다는 것은 비밀......아...





이렇게 Context API를 사용하는 방법에 대해 알아봤는데, 다시 기초를 다진다는 느낌으로 정리해 보았다.