Context API

오늘 강의 주제는 Context API이다.

과제도 Context API에 대한 내용을 블로그에 정리하는 것이니 포스팅해 보겠다.

 

사실 다른 주제로 블로그 작성하는 과제가 나오기는 했지만 대부분 노션에 작성했고 굳이 내 블로그에 올릴 필요가 있나 싶은 개인적인 생각이 있어서 몇 개는 올리지 않았는데 ContextAPI는 중요해 보이니 블로그에 한번 찌끄려보려고 한다.

 

Context API란?

Context API는 React에서 컴포넌트 간에 데이터를 전달할 때 사용하는 강력한 기능이다. 기본적으로 컴포넌트 트리 전체에 데이터를 전파할 수 있도록 해준다. 이렇게 하면, 중간 단계의 컴포넌트들을 통해 props를 전달할 필요 없이 필요한 데이터를 자식 컴포넌트로 직접 전달할 수 있다.

 

그래서 언제 사용하는데?

- 전역 상태 관리

Context API는 전역 상태를 관리하는 데 적합하다. 예를 들어, 사용자 인증 상태, 테마 설정, 언어 선택 등의 전역 상태를 여러 컴포넌트에서 공유할 필요가 있을 때 유용하다.

예시: 사용자가 로그인 상태를 모든 페이지에서 공유해야 할 때, Context를 사용해 로그인 상태와 사용자 정보를 전역적으로 관리할 수 있다.

 

- 깊은 컴포넌트 트리에서 데이터 전파

여러 계층을 거쳐야 하는 데이터 전달이 복잡해질 때, Context를 사용하면 중간 컴포넌트를 거치지 않고 데이터를 직접 전달할 수 있다.

예시: 다단계 폼에서 부모 컴포넌트가 여러 자식 컴포넌트로 상태를 전달해야 하는 경우, Context를 통해 이들 컴포넌트 간의 상태를 쉽게 공유할 수 있다.

 

- 테마나 사용자 설정 등의 글로벌 설정

애플리케이션의 전역 설정이나 테마를 여러 컴포넌트에서 접근할 수 있도록 할 때 유용하다.

예시: 웹사이트의 다크 모드와 라이트 모드 설정을 전역적으로 관리하고, 사용자 설정을 모든 컴포넌트에서 참조할 수 있게 한다.

 

- 일관된 데이터 공유

특정 데이터를 여러 컴포넌트에서 일관되게 사용해야 할 때, Context API는 동일한 데이터를 모든 컴포넌트에서 유지할 수 있도록 한다.

예시: 애플리케이션 내에서 사용자 정보를 공유해야 할 때, 각 컴포넌트에서 동일한 사용자 정보를 접근하고 유지하는 데 도움이 된다.

 

언제 사용하지 말아야 할까?

- 부모-자식 컴포넌트 간의 단순 데이터 전달

컴포넌트 트리가 간단하고, 데이터가 직계 자식 컴포넌트로 전달되는 경우에는 props를 사용하는 것이 더 직관적이다.

 

- 자주 변경되는 데이터

Context API는 데이터가 자주 변경되는 경우 성능 문제가 발생할 수 있다. 이러한 경우에는 리덕스(Redux)나 Zustand 같은 상태 관리 라이브러리를 고려하는 것이 좋다.

 

- 컴포넌트 재사용성

Context API를 사용하여 컴포넌트를 작성할 때, Context의 데이터에 강하게 의존하게 되므로, 컴포넌트의 재사용성이 줄어들 수 있다. 따라서 Context가 정말 필요한 경우에만 사용하는 것이 좋다.

Context API는 전역 상태 관리와 데이터 공유를 간편하게 해주는 강력한 도구이지만, 상황에 맞게 적절히 사용하는 것이 중요하다.

 

Context API 사용법

1. createContext로 전역 상태 만들기

// context폴더 > counterContext.jsx

import { createContext } from "react";

// const 전역저장소_이름 = createContext();
const conterContext = createContext();

// 상태를 집어넣을 함수 컴포넌트 생성 및 전역에서 사용할 수 있게 export
export function CounterProvider({children}) { // props를 내려받을 수 있게 {children} 작성
  const [counter, setCounter] = useState(0);
  
  return ( // 특정 컴포넌트를 리턴시킨다.
    // value에는 전역에서 사용할 상태를 넣는다.
    // <전역저장소_이름.Provider value={전역에서 사용할 상태값}>
    <conterContext.Provider value={[counter, setCounter]}> 
      {children} // props를 내려받을 수 있게 {children} 작성
    </conterContext.Provider>
  )
}

context API를 사용할 때에는 context API를 담아둘 별도의 폴더를 생성하는 것을 권장한다.

value에 들어가는 값은 conterContext안에 들어가는 상태값이다.

props로 상태를 내려받을 수 있게 children을 작성한다.

 

2. Provider로 전역 상태 연결하기

// main.jsx

import { CounterProvider } from './경로/counterContext_파일명.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(
  <CounterProvider> // CounterProvider로 App 감싸기(App에서 사용하기 위해)
    <App />
  </CounterProvider>
)

App.jsx에서 사용할 수 있게 <App /> 컴포넌트를 생성한 컴포넌트로 감싸준다.

이렇게 하면 App이라는 컴포넌트가 CounterProvider의 children자리로 들어온다.

 

3. useContext로 전역 상태 가져오기

// context폴더 > counterContext.jsx

export function useCounter() { // 어디서든 꺼내 쓸 수 있도록 함수로 한번 감싸서 사용한다.
  return useContext(conterContext)
}

여러 개의 컴포넌트에서 counterContext를 사용한다면 함수로 한번 감싸서 export 해준다.

 

 

*****완성된  counterContext.jsx파일

(1.전역상태_만들기_코드 + 3.useContext로_전역_상태_가져오기)

import { useContext, useState } from "react";
import { createContext } from "react";

const conterContext = createContext();

export function CounterProvider({children}) {
  const [counter, setCounter] = useState(0);
  
  return (
    <conterContext.Provider value={[counter, setCounter]}>
      {children}
    </conterContext.Provider>
  )
}

export function useCounter() {
  return useContext(conterContext)
}

 

 

App.jsx에서 사용해 보자

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

function App() {
  const [counter, setCounter] = useCounter();
  return (
    <>
      <div>counter: {counter}</div>
      <button type='button' className='btn' onClick={() => {setCounter(counter + 1)}}>+1</button>
      <button type='button' className='btn' onClick={() => {setCounter(counter - 1)}}>-1</button>
    </>
  )
}

export default App;

 

잘 적용되는 것을 확인할 수 있다.

 

리액트로 뭔가를 만들 때마다 컴포넌트를 쪼개면 보기 편하겠다 싶다가도 props지옥에 빠져 컴포넌트 생성을 생략했었는데 이거 잘 활용하면 아주 좋을 듯싶다.