Context API

Context API?

props 대신 component tree를 통해 곧바로 컴포넌트에 전달하는 방식

 

props drilling을 회피하기 위한 용도로 사용한다.

다른 레벨의 많은 컴포넌트가 특정 데이터를 필요로 할 때 주로 사용한다.

 

Context API를 useState 및 useReducer를 함께 사용하는 편이다.

컴포넌트가 상태 관리를 공유할 수 있도록 트래킹을 도와주고,

실제 상태 변경은 useState 및 useReducer 등의 hook 이 진행한다.

 

 

 

Context API 사용법

 

먼저 Context를 생성해 주어야 한다.

 

createContext

전역 상태를 만들어준다.

const Mycontext = createContext(초기값);

 

 

Provider

전역 상태를 연결해 준다.

Provider를 사용하여 생성한 context를 하위 컴포넌트들이 데이터를 받을 수 있도록 해준다.

<MyContext.Provier value={데이터값} />

 

Provider로 하위 컴포넌트들을 감싸주면

모든 하위 컴포넌트들이 Context에 접근 가능하다.

 

 

useContext()

전역 상태를 가져와 준다.

 

useContext() 훅

: createContext() 함수 호출로 생성된 Context 객체를 인자로 받아

현재 Context 값을 리턴한다.

function My(props) {
    const myValue = useContext(MyContext);

    return (
        <div>{myValue}</div> // Provider에서 value로 전달한 데이터 출력
    )
}

 

** useContext() 훅 사용 시 파라미터로 Context 객체를 넣어줘야 한다 **

 

 

Context API를 활용한 counter 예시

 

* counterContext.jsx

 

Context 생성

const counterContext = createContext();

 

 

Provider 컴포넌트

CounterProvider는 counter 상태와 setCounter 함수를 관리하며,

counterContext.Provider를 통해 자식 컴포넌트에 제공한다.

 

value 값에 { counter, setCounter }를 설정,

이 값을 모든 자식 컴포넌트가 접근할 수 있게 한다.

export const CounterProvider = ({ children }) => {
    const [counter, setCounter] = useState(0);

    return (
        <counterContext.Provider value={{ counter, setCounter }}>
            {children}
        </counterContext.Provider>
    );
};

 

 

Context 사용하기

useCounter 훅을 사용하여

위에서 생성 했던 const counterContext = createContext();의

counterContext(상태저장소)에서 상태와 함수를 가져온다.

function useCounter() {
    return useContext(counterContext);
}

 

 

* App.jsx

 

useCounter 훅을 사용하여 counter와 setCounter를 가져온다.

import { useCounter } from '../context/counterContext';

export function App() {
  const { counter, setCounter } = useCounter();

  return (
    <>
      <div>counter: {counter}</div>
      <button onClick={() => setCounter(prev => prev + 1)}>+</button>
      <button onClick={() => setCounter(prev => prev - 1)}>-</button>
    </>
  );
}

 

 

* main.jsx

 

CounterProvider에서 제공하는 걸 App 컴포넌트와 그 자식들이 이 상태를 공유 가능하다.

createRoot(document.getElementById('root')).render(
  <CounterProvider>
    <App />
  </CounterProvider>,
)