✏️ React의 useContext

 

 

React를 배우다보니 우리는 많은 전역관리가 있다는 것을 알게 되었다. 

그 중에 기본 React의 Hook인 `useContext`에 대해서 공부를 해보았다.

 

 

 

---

 

 

먼저 들어가기 전에!

useContext에 대해 이해하려면 `React`에 있는 `Context`개념부터 알고 넘어가보도록 한다.

 

 

Context는 무엇인가?

리액트는 기본적으로 부모 컴포넌트와 자식 컴포넌트로 이루어진 `트리 구조`를 가지고 있다.

부모가 가지고 있는 데이터를 자식에서도 사용하고 싶으면 `props`로 데이터를 넘겨줘야 한다.

하지만 전달해야 하는 데이터가 자식의 자식의 자식에 있으면 코드는 복잡해지고, 계속 `props`로 데이터를 넘겨줘야 한다.

이런 구조를 `props drilling`이라고 하는데, `props drilling`은 이전 포스팅에 정리해둔게 있으니 이 내용에 대해서는 더 깊게 생략!

 

이러한 `props drilling`을 극복하기 위해 나온 개념이 `Context`이다.

`Context`를 사용하면 `props`전달 없이 하위 컴포넌트에서 자유롭게 값을 가져와서 사용할 수 있다.

 

 

---

 

useContext

context API 필수 개념

`createContext` : context 생성

`ConSumer` : context 변화 감지

`Provider` : context 전달 ( to 하위 컴포넌트)

 

특히 `useContext`를 사용하게 되면 Provider(최상위부모)에서 제공한 value값이 달라진다고 가정하면

`useContext`를 사용하고 있는 모든 컴포넌트가 `리렌더링` 된다.

그래서 항상 `value`값을 신경 써 줘야 한다.

 

 

실행컨텍스트

어떠한 로직이 실행되는 문맥적인 범위를 말한다.

 

 

 

사용법 예시

import { createContext, useState } from "react";

export const ExpenseContext = createContext();

export default function ExpenseProvider({ children }) {
  const [expenses, setExpenses] = useState([
    {
      id: "1",
      month: 2,
      date: "2024-02-02",
      item: "식비",
      amount: 50000,
      description: "회식",
    },
    {
      id: "2",
      month: 1,
      date: "2024-01-02",
      item: "도서",
      amount: 30000,
      description: "미용실",
    },
  ]);
  return (
    <ExpenseContext.Provider value={{ expenses, setExpenses }}>
      {children}
    </ExpenseContext.Provider>
  );
}

 

먼저 `Context`에 있는 내용을 만들어준다.

 

 

 

 

 

    <ExpenseProvider>
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={<Home expenses={expenses} setExpenses={setExpenses} />}
          />
          <Route
            path="/detail/:id"
            element={<Detail expenses={expenses} setExpenses={setExpenses} />}
          />
        </Routes>
      </BrowserRouter>
    </ExpenseProvider>

 

`Context`가 필요한 곳에 주입해준다.

 

 

 

 

 

사용할 컴포넌트

import { useContext } from "react"
import { ExpenseContext } from "../../context"

 

import로 `useContext`를 가져오고,

내보내기 했던 변수명을 가지고온다.

 

 

 

const { expenses, setExpenses } = useContext(ExpenseContext);

 

그리고 사용할 해당 컴포넌트에 사용해주면 끝이다.

 

 

 

 

---

 

 

props와 props drilling에 대한 이전 포스팅 

✏️ React의 props와 props drilling