React] Hook : useContext 단점 해결

useContext

2023.06.23 - [Front-End/React] - React] Hook : useContext

 

앞 게시글에서 얘기했던 useContext의 단점은 리렌더링이 자주 발생하게 된다는 것입니다.

이를 개선하고자 합니다.

 

 

---

 

 

예

 

앞에 예를 들었던 마트 코드에서는 2층 과일, 3층 음료수로 변경하였습니다/

만약 addDrink뿐만 아니라 addFruit를 context추가하여 사용하고,

이를 Emart2F라는 컴포넌트를 새로 만들어서 사용한다고 생각하면,

addFruit 하게 될 때 Emart3F도 리렌더링 되는 현상을 볼 수 있을 것입니다.

이를 해결하려고 몇 가지 수정했습니다.

 

 

---

 

 

Emart.js

import React, { useState, useContext } from "react";
import Emart3F from "./Emart3F";
import Emart2F from "./Emart2F";
import { DrinkProvider, FruitsContext } from "./AppContext";

function Emart() {
  const martFruits = useContext(FruitsContext);
  const [fruits, setFruits] = useState(martFruits);

  const addFruit = (newFruit) => {
    setFruits({ ...fruits, fruits: [...fruits.fruits, newFruit] });
    console.log(newFruit.name + "가 추가되었습니다.");
  };

  return (
    <div>
      <h2>이마트</h2>
      <FruitsContext.Provider value={{ fruits, addFruit }}>
        <Emart2F></Emart2F>
      </FruitsContext.Provider>

      <DrinkProvider>
        <Emart3F></Emart3F>
      </DrinkProvider>
    </div>
  );
}

export default Emart;

 

기존 코드는 App에서 작성하였는데, 2층 3층 분리를 위해 Emart컴포넌트로 옮겼습니다.

Fruit는 기존 소스와 동일하게 추가작성 하였고, Drink는 새로 Provider를 정의해 줬습니다.

왜냐면, Emart컴포넌트에  기존과 같이 넣게 되면,

addFruit 했을 때, setFruits가 실행되어 state가 바뀌게 되면서 전체 컴포넌트가 리렌더링 되기 때문입니다.

 

따라서 리렌더링을 막기 위해서는 독립적으로 시행해야 되고,

차이점을 보기 위해 Fruit는 기존 방식, Drink는 분리된 방식으로 구현하였습니다.

 

Emart3F.js

import React, { useContext } from "react";
import { DrinkContext } from "./AppContext";

function Emart3F() {
  const newDrink = { name: "HOT6", price: "1500" };
  const { drink, setDrink } = useContext(DrinkContext);

  const addDrink = (newDrink) => {
    setDrink({ ...drink, drink: [...drink.drink, newDrink] });
    console.log(newDrink.name + "가 추가되었습니다.");
  };
  console.log("3층");

  return (
    <div>
      <h3>이마트 3층</h3>
      <div>
        음료수
        {drink?.drink.map((item, index) => {
          return (
            <div key={index}>
              {item.name} : {item.price}원
            </div>
          );
        })}
        <button onClick={() => addDrink(newDrink)}>음료 품목 추가</button>
      </div>
    </div>
  );
}

export default Emart3F;

 

2층 소스는 기존 Emart3F 컴포넌트와 동일하고, Emart3F를 개선했습니다.

drink와 setDrink를 useContext로 받고, addDrink함수를 통해 setDrink를 실행하게 됩니다.

이러면 Emart3F 안에서 동작하여 재정의한 DrinkProvider가 동작하면서 DrinkContext값이 바뀌기 때문에 다른 컴포넌트에서는 리렌더링 되지 않습니다.

 

AppContext.js

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

const initialDrink = {
  drink: [
    { name: "Powerade", price: "1800" },
    { name: "Coca Cola", price: "1100" }
  ]
};

const initialFruits = {
  fruits: [
    { name: "Apple", price: "3500" },
    { name: "Grape", price: "6000" }
  ]
};

export const DrinkContext = createContext(initialDrink);
export const FruitsContext = createContext(initialFruits);

export function DrinkProvider({ children }) {
  const [drink, setDrink] = useState(initialDrink);

  return (
    <DrinkContext.Provider value={{ drink, setDrink }}>
      {children}
    </DrinkContext.Provider>
  );
}

 

createContext해주는 부분이고, drink부분에서 state를 독립적으로 사용하기 위해, DrinkProvider를 재정의 해주었습니다.

이렇게 되면 Emart3F에서 일어나는 addDrink함수가 실행되면 Emart3F안에서 state가 바뀌고,

contexet의 값이 바뀌기 때문에 Emart3F 이외의 컴포넌트에서는 리렌더링이 일어날 일이 없습니다.

 

확인은 버튼 눌러서 console.log로 확인할 수 있습니다.

 

 

---

 

 

context분리 외에도 React.memo나 useMemo, useCallback을 활용해서 값이나 함수를 기억해 놓을 수도 있을 것 같습니다.
useReducer를 활용해서 addDrink나 addFruits 같은 콜백함수들도 함께 묶어서 사용하는 게 더 좋을 듯싶다는 생각도 듭니다.
간단한 예를 들어서 학습하고 글로 작성해 봤는데, 개선할 것들이 많아 보이네요.

(useReducer를 많이 안 써봐 가지고 생각이 잘 안나는 듯...)

 

나중에 상태관리 라이브러리를 배우면 작은 건 useContext, 규모가 커지면 Redux Toolkit이나 Zustand, Recoil를 활용하는 것이 좋을 것입니다.

Redux Toolkit만 사용해 봤는데, 리렌더링 문제로 인해 상태값이 초기화되는 현상이 있었습니다.

useContext는 provider로 감싼 모든 컴포넌트가 리렌더링 하는데,
redux의 경우 useSelector로 받은 컴포넌트한에서만 리렌더링 되게 된다.

고로 store(useContext의 경우는 AppContext)의 규모가 아무리 커도 useSelector로 받은 상태의 한에서만 리렌더링 됩니다.

(그래도 쪼갤 수 있는 건 최대한 쪼개는 게 좋을 듯싶다.)