"React에서의 상태 관리" : Custom Hook vs. Context API

1. 소개 

• React에서 상태 관리는 애플리케이션의 복잡성과 효율성을 결정짓는 중요한 요소임.
• 이 중에서도 React Custom Hook과 Context API는 각각의 특징과 사용 방법으로 효과적인 상태 관리를 가능하게함.

2. Custom Hook: 로직과 상태 재사용

• Custom Hook은 주로 특정 컴포넌트 또는 컴포넌트 그룹의 상태와 관련 로직을 재사용하기 위한 도구임.
• 이를 통해 컴포넌트의 로직을 추상화하고 독립적으로 만들 수 있으며, 이를 다른 컴포넌트에서 재사용할 수 있게됨.
• 이는 "지역 상태"를 관리하는 데 효과적일 수 있지만, 그것이 지역 상태 관리만을 위한 것은 아님!

3. Context API: 상태 공유와 prop drilling 해결

• Context API는 애플리케이션 전반에 걸쳐 상태를 공유할 수 있는 기능을 제공함.
• 여러 컴포넌트 간에 데이터를 공유하거나, 상위에서 하위 컴포넌트로 데이터를 전달하는 'prop drilling' 문제를 해결하는 데 효과적.
• 이는 "전역 상태"를 관리하는 데 유용할 수 있지만, 그것이 전역 상태 관리만을 위한 것은 아님!.

4. 실습

ㄱ. Custom Hook컴포넌트

import { useState } from "react";

export function CustomHookTest() {
  const [state, setState] = useState("dark");
  const testChange = () => {
    setState("ligth");
  };
  return { state, setState, testChange };
}

 

ㄱ-1. Custom Hook 사용하는 Test2 컴포넌트

import React from "react";
import { CustomHookTest } from "./hook/Test";

export default function Test2() {
  const { state, setState, testChange } = CustomHookTest();

  console.log("test2", state);

  return (
    <div>
      {state}

      <button onClick={() => setState("light")}>라이트로 변경</button>
      <button onClick={testChange}>온클릭</button>
    </div>
  );
}

ㄴ. ContextAPI 컴포넌트

// TestContext.js
import React, { createContext, useContext, useState } from "react";

const TestContext = createContext();

export const TestProvider = ({ children }) => {
  const [contextState, setContextState] = useState("dark");
  const contextChange = () => {
    setContextState("light");
  };

  return (
    <TestContext.Provider
      value={{ contextState, setContextState, contextChange }}
    >
      {children}
    </TestContext.Provider>
  );
};

export const useTest = () => {
  const context = useContext(TestContext);
  if (!context) {
    throw new Error("useTest must be used within a TestProvider");
  }
  return context;
};

ㄴ-1. App 컴포넌트

// App.js
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Test2 from "./Test2";
import Test3 from "./Test3";
import { TestProvider } from "./TestContext";

function App() {
  return (
    <Router>
      <TestProvider>
        <Routes>
          <Route path="/" element={<Test2 />} />
          <Route path="/about" element={<Test3 />} />
        </Routes>
      </TestProvider>
    </Router>
  );
}

export default App;

ㄴ-2. ContextAPI를 사용하는 Test3 컴포넌트

import React from "react";

import { useTest } from "./TestContext";

export default function Test3() {
  const { contextState, setContextState, contextChange } = useTest();

  console.log("test3", contextState);

  return (
    <div>
      {contextState}

      <button onClick={() => setContextState("light")}>
        콘텍스트크로 변경
      </button>

      <button onClick={() => setContextState("dark")}>다크로 변경</button>
      <button onClick={contextChange}>온클릭</button>
    </div>
  );
}

5. 차이점

• Custom Hook의 경우 Test2에서 state ligth로 변경후 Test3로 이동하면 state는 ligth로 변경되지않고 dark로 유지되는 지역상태관리
• Context API의 경우 Test3에서 state ligth로 변경후 Test2로 이동하면 state는 dark가 아닌 ligth로 변경되는 전역상태관리임 (다만, 모든컴포넌트에서 관리할거면 최상위 컴포넌트를 Provider로 감싸줘야함)

6. 결론

Custom Hook과 Context API는 각각의 특징과 주요 사용 사례에 따라 적절하게 활용되어야 합니다. 이를 통해 React 애플리케이션의 상태 관리를 효율적으로 수행할 수 있습니다.