React에서 Context API와 Selector로 성능 최적화

// Context.js

import React, { createContext, useContext, useState, useMemo } from 'react';

const CounterContext = createContext();

export const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  const value = useMemo(() => ({ count, setCount }), [count]);

  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCount = () => {
  const { count } = useContext(CounterContext);
  return count;
};

export const useSetCount = () => {
  const { setCount } = useContext(CounterContext);
  return setCount;
};

 

// App.js

import React from 'react';
import { CounterProvider, useCount, useSetCount } from './Context';

const CounterDisplay = React.memo(() => {
  const count = useCount();
  console.log('CounterDisplay 렌더링');
  return <h1>Count: {count}</h1>;
});

const CounterControls = React.memo(() => {
  const setCount = useSetCount();
  console.log('CounterControls 렌더링');
  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
    </div>
  );
});

function App() {
  return (
    <CounterProvider>
      <CounterDisplay />
      <CounterControls />
    </CounterProvider>
  );
}

export default App;