[React] Context Provider, useEffect, useMemo

React에서 context provider, useEffect, 그리고 useMemo는 모두 중요한 개념이며 React 애플리케이션을 개발할 때 자주 사용됩니다. 각각의 역할과 사용법에 대해 자세히 설명하겠습니다.

1. Context Provider:
   • 역할: Context Provider는 React 컴포넌트 트리 전체에서 데이터를 공유하는 데 사용됩니다. 주로 전역 상태 관리에 활용됩니다.
   • 사용법: Context를 생성하고, 해당 컨텍스트의 공급자(Provider)를 사용하여 컴포넌트 트리에 값을 제공합니다. 컴포넌트에서는 해당 컨텍스트의 값을 소비(consume)할 수 있습니다.

   • // 예시: 컨텍스트 생성
     const MyContext = React.createContext();
     
     // 예시: 컨텍스트 공급자 사용
     function App() {
       const valueToProvide = 'This is my context value';
     
       return (
         <MyContext.Provider value={valueToProvide}>
           <ChildComponent />
         </MyContext.Provider>
       );
     }
     
     // 예시: 컨텍스트 값 소비
     function ChildComponent() {
       const contextValue = useContext(MyContext);
       return <div>{contextValue}</div>;
     }

2. useEffect:
   • 역할: useEffect는 컴포넌트의 생명주기와 관련된 작업을 수행하도록 허용합니다. 주로 데이터 가져오기, 구독 설정, 타이머 설정 등의 부수 효과 작업에 사용됩니다.
   • 사용법: useEffect 훅을 사용하여 부수 효과 작업을 정의하고, 종속성 배열(dependency array)을 통해 언제 실행할 지를 제어합니다. 종속성 배열에 포함된 값이 변경될 때만 useEffect 콜백이 실행됩니다.

   • function ExampleComponent() {
       const [count, setCount] = useState(0);
     
       useEffect(() => {
         document.title = `Count: ${count}`;
       }, [count]); // count가 변경될 때만 실행
     
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={() => setCount(count + 1)}>Increment</button>
         </div>
       );
     }

3. useMemo:
   • 역할: useMemo는 계산 비용이 높은 값을 캐싱하여 성능을 최적화하는 데 사용됩니다. 특히 렌더링 동안 같은 값을 계속 계산하지 않도록 도움을 줍니다.
   • 사용법: useMemo 훅을 사용하여 계산된 값을 캐싱하고, 종속성 배열을 통해 어떤 상황에서 새로 계산할지를 제어합니다.

   • function ExpensiveCalculationComponent({ data }) {
       const result = useMemo(() => {
         // data를 기반으로 계산 비용이 높은 작업 수행
         return performExpensiveCalculation(data);
       }, [data]); // data가 변경될 때만 다시 계산
     
       return <div>Result: {result}</div>;
     }

 

이러한 React 훅과 개념은 각각의 역할에 따라 애플리케이션의 구조와 성능을 개선하는 데 도움을 줍니다. 각각을 올바르게 사용하여 React 애플리케이션을 개발하고 최적화하는 데 중요한 역할을 합니다.