Context API 전역 상태 관리

Context API 를 사용하지 않는 경우

props를 통해 부모에서 자식으로 또 그의 자식으로 순차적으로 전달하는 방식이다.

---

GrandParents.jsx

import { useState } from "react";
import Parents from "./Parents";

const GrandParents = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>GrandParents</h1>
      <Parents setCount={setCount} />
      <br />
      <div>{count}</div>
    </div>
  );
};

export default GrandParents;

---

Parents.jsx

import Children from "./Children";

const Parents = ({ setCount }) => {
  return (
    <div>
      <h2>Parents</h2>
      <Children setCount={setCount} />
    </div>
  );
};

export default Parents;

---

Children.jsx

const Children = ({ setCount }) => {
  return (
    <div>
      <h3>Children</h3>
      <button onClick={() => setCount((prev) => prev + 1)}>클릭!</button>
    </div>
  );
};

export default Children;

---

Context API를 사용한 경우

GrandParents에 context를 생성 후, Parents를 거치지 않고 Children에서 바로 데이터에 접근할 수 있다.

---

GrandParents.jsx

import { createContext, useMemo, useState } from "react";
import Parents from "./Parents";

export const CountContext = createContext({
  setCount: () => {}
});

const GrandParents = () => {
  const [count, setCount] = useState(0);

  const handleIncrease = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <CountContext.Provider value={{ count, handleIncrease }}>
      <h1>GrandParents</h1>
      <Parents />
      <br />
      <div>{count}</div>
    </CountContext.Provider>
  );
};

export default GrandParents;

---

Parents.jsx

import Children from "./Children";

const Parents = () => {
  return (
    <div>
      <h2>Parents</h2>
      <Children />
    </div>
  );
};

export default Parents;

---

Children.jsx

import { useContext } from "react";
import { CountContext } from "./GrandParents";

const Children = () => {
  const { count, handleIncrease } = useContext(CountContext);
  return (
    <div>
      <h3>Children</h3>
      <button onClick={() => handleIncrease(count)}>클릭!</button>
    </div>
  );
};

export default Children;

---

느낀점

상위 컴포넌트에서 하위 컴포넌트로 일일이 props를 넘겨주어야 하는 기존 방식은 props로 받은 참조값의 위치를 찾으려면 넘겨받은 모든 컴포넌트를 다 거슬러 올라가야 하는 번거로움이 있어 코드 유지보수에 불편함이 있다.
Context API를 쓰면 컴포넌트를 단계적으로 거치지 않고도 데이터에 접근할 수 있어 편리하다. 컴포넌트가 겹겹이 있는 복잡한 구조의 경우에 유용하고 별도의 설치없는 React 기본 제공 API라서 의존성 고민이 없다는 것도 장점이다. 그러나 Provider 속성이 변경될 때마다 리렌더링이 일어나는 특성은 복잡한 계산식이나 큰 규모의 프로젝트에서는 성능 저하의 원인이 될 수 있는 만큼 경우에 따라 적절히 사용할 필요가 있겠다.