1.3 Context API의 장점과 한계

1.3.1 React Context API의 장점

1) 전역적인 상태 관리

2) props의 전달 감소

3) 효율적인 동적 데이터 처리

1.3.2 React Context API의 한계 및 제약사항

1) 코드의 복잡성, 높은 결합도

function App() {
  return (
    <AProvider>
      <BProvider>
        <CProvider>
          <DProvider>
            <EProvider>
              <Component />
            </EProvider>
          </DProvider>
        </CProvider>
      </BProvider>
    </AProvider>
  );
}

2) Re-rendering 문제

(1) 리렌더링

(2) 리렌더링의 원인

import React, { createContext, useContext, useState } from "react";

// Context 생성
const UserContext = createContext();

// Context를 사용할 Provider 컴포넌트
function UserProvider({ children }) {
  const [userName, setUserName] = useState(""); // 유저 이름 상태

  return (
    <UserContext.Provider value={{ userName, setUserName }}>
      {children}
    </UserContext.Provider>
  );
}

// 유저 이름을 입력하는 컴포넌트
function UserNameInput() {
  const { userName, setUserName } = useContext(UserContext);

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={(e) => setUserName(e.target.value)}
      />
    </div>
  );
}

// 유저 이름을 보여주는 컴포넌트
function UserNameDisplay() {
  const { userName } = useContext(UserContext);

  return (
    <div>
      <p>유저 이름: {userName}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>유저 정보 관리 예제</h1>
      <UserProvider>
        <UserNameInput />
        <UserNameDisplay />
      </UserProvider>
    </div>
  );
}

export default App;

(3) 성능 문제 최적화 기법

• 각 데이터마다 Context 분리
객체나 배열 같은 여러 항목의 데이터를 Context의 value로 관리하면 렌더링 문제가 빈번히 발생할 수 있습니다. 따라서 객체나 배열의 데이터를 각각 하나의 value로 하나의 Context에 저장하면 렌더링 문제를 해결할 수 있습니다. 하지만 Context를 분할해서 사용할 경우, 성능 개선에는 효과적이지만 Context가 많아져 결국 유지보수에 어려움이 생길 수 있습니다.
 

• shouldComponentUpdate(클래스 컴포넌트), React.memo (함수 컴포넌트)
shouldComponentUpdate 메서드는 React 클래스 컴포넌트에서 사용되는 라이프사이클 메서드 중 하나로, 컴포넌트가 리렌더링될 때 리렌더링 여부를 결정하는 데 사용됩니다. ContextAPI의 성능 문제를 해결하기 위해 이 메서드를 활용하는 방법은 다음과 같습니다.
먼저, Context를 사용하여 데이터를 구독하는 컴포넌트 중에서 리렌더링이 불필요한 컴포넌트를 식별합니다. 이는 성능 문제가 발생하는 지점을 파악하는 중요한 단계입니다.
다음은 최적화의 대상으로 선택한 컴포넌트 내에서 shouldComponentUpdate 메서드를 구현합니다. 이 메서드는 현재의 props와 state를 비교해 리렌더링의 여부를 결정합니다.
 
아래는 shouldComponentUpdate 메서드를 구현한 예시 코드 입니다.

function shouldComponentUpdate(nextProps, nextState) {
  // 현재 상태(props, state)와 다음 상태(props, state)를 비교하여 리렌더링 여부를 결정
  if (this.props.someData !== nextProps.someData) {
    // someData가 변경되었을 때에만 리렌더링 허용
    return true;
  }
  // 다른 경우 리렌더링 방지
  return false;
}

 
이제, 어떤 조건하에 리렌더링을 허용할 것인지 설정해야 합니다. 이 조건은 컴포넌트의 성능 최적화에 따라 달라질 수 있습니다. 예를 들어, 특정 데이터가 변경되었을 때만 리렌더링을 허용하는 등의 조건을 설정할 수 있습니다.

import React, { memo } from "react";

function MyComponent(props) {
    // 컴포넌트 내용
}

export default memo(MyComponent);

• useMemo
useMemo는 React 훅의 일종으로 리렌더링이 불필요한 상황에서 컴포넌트가 이전에 계산한 값을 재사용하는데, 이는 불필요한 계산과 렌더링을 방지하고 성능을 최적화할 수 있습니다.

import React, { createContext, useContext, useMemo } from "react";

// Context 생성
const MyContext = createContext();

// Provider 컴포넌트
function MyProvider({ children }) {
  // useMemo를 사용하여 값이 변경될 때만 새로 계산
  const contextValue = useMemo(() => {
    return {
      data: "some data",
      // 다른 컨텍스트 값들...
    };
  }, []); // 빈 배열을 전달하여 의존성을 없앰

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

// Consumer 컴포넌트 생략