[React] Context API로 전역상태관리하기

240207 TIL ✏️

 

React의 hook useContext 를 활용해 Context api 로 전역 상태 관리를 해보기 !

 

컴포넌트간에 데이터를 전달할 때 props를 쓰는 방법을 배웠었는데, 이 경우 props-drilling이 발생할 수 있다는 게 문제점이었다. 즉 불필요하게 여러 컴포넌트를 거치며 데이터를 전달하게 될 수도 있다는 것.   

상위 컴포넌트 -> (중간) 컴포넌트 -> 컴포넌트 -> 하위 컴포넌트  .. 이렇게!

 

=>

 

Context api를 통해 이러한 문제를 해결할 수 있음

원하는 컴포넌트에서 바로 데이터를 전달받아 쓸 수가 있다

 

context 폴더 안에  ~ Context.jsx 파일 생성 

그 안에  아래와 같이 {createContext }  import 등 설정을 해주고  이걸 담은 Context 변수를 export해주기

import { createContext } from "react";

export const LetterContext = createContext();

 

바로 LetterContext.Provider 로 쓰는 방법도 있지만, 

이 Context.jsx에서 Provider 함수를 따로 만들어 {children}을 받도록 해  데이터를 전달할 수도 있다

 

아래와 같은 식이다. 

<LetterProvider>  ...  </LetterProvider> 이렇게 감싸줌으로써 태그 사이 들어오는 {children}을 

결국 <LetterContext.Provider> 로 감싸줌으로써  그 안에 value 데이터가 전달되도록 한다

const LetterProvider = ({ children }) => {

...

return (
    <LetterContext.Provider
      value={{
        letterData,
		....
      }}
    >
      {children}
    </LetterContext.Provider>
  );
};

export default LetterProvider;

import LetterProvider from "./context/LetterContext";
import Router from "./shared/Router";
import { GlobalStyle } from "./style/GlobalStyle";

const App = () => {
  return (
    <LetterProvider>
      <GlobalStyle />
      <Router />
    </LetterProvider>
  );
};

export default App;

이렇게 위처럼, App.jsx와 같은 (최)상위 컴포넌트에서 <LetterProvider> 로 감싸주면 그 안에 모두 적용되게 된다.

 

다른 하위 컴포넌트에서는

useContext를 사용해 value - 전달받은 데이터를 사용 가능 !

 

다른 하위 컴포넌트에서

  const { letterData, modifyLetter, deleteLetter } = useContext(LetterContext);

예를 들어 위와 같이 useContext 훅을 사용해 (import하기) 

구조분해할당도 쓰고, letterData 등 변수로 담아 원하는 데이터를 바로 쓸 수 있다.