ReactJS 디자인 패턴 ~Context Selector~

Source: Dev.to

컨텍스트 셀렉터 패턴

• 컨텍스트 패턴은 useContext와 달리 useContextSelector를 사용하여 특정 상태 조각을 추적합니다. 이는 다른 상태 조각이 변경될 때 불필요한 재렌더링을 방지합니다.

예시 구현

import { useState, useEffect } from "react";
import {
  createContext,
  useContext,
  useContextSelector,
} from "use-context-selector";

const AppContext = createContext();

function NameComponent() {
  const name = useContextSelector(AppContext, (state) => state.name);

  useEffect(() => {
    console.log("NameComponent rendered");
  });

  return (
    <>Name: {name}</>
  );
}

function CountComponent() {
  const count = useContextSelector(AppContext, (state) => state.count);

  useEffect(() => {
    console.log("CountComponent rendered");
  });

  return (
    <>Count: {count}</>
  );
}

function AppProvider({ children }) {
  const [name, setName] = useState("John");
  const [count, setCount] = useState(0);

  return (
    <AppContext.Provider value={{ name, count, setName, setCount }}>
      <button onClick={() => setName(name === "John" ? "Jane" : "John")}>
        Change Name
      </button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      {children}
    </AppContext.Provider>
  );
}

function App() {
  return (
    <AppProvider>
      <NameComponent />
      <CountComponent />
    </AppProvider>
  );
}

export default App;