[리액트 8] useMemo, useReducer 추가

import React, { useMemo } from 'react';

function MyComponent({ list }) {
  const sortedList = useMemo(() => {
    return list.sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      {sortedList.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

export default MyComponent;

 

// 계속 sortedList 바뀌는데 useMemo 굳이 왜쓰는 거임

 

네, 맞습니다. 이 코드에서 list가 변경되면 sortedList도 변경됩니다. useMemo 훅은 React 컴포넌트가 리렌더링될 때 불필요한 계산을 피하기 위해 사용됩니다.

 

useMemo의 주요 목적은 성능 최적화입니다. 이 훅은 주어진 의존성 배열([list] in your case) 내의 값들이 변경될 때만 메모이제이션된 값을 다시 계산합니다. 만약 list가 변경되지 않는다면, useMemo는 이전에 계산된 값을 재사용하여 불필요한 연산을 방지합니다.

 

이 코드의 경우, list가 변경될 때마다 정렬이 필요합니다. useMemo를 사용하면 list가 변경되지 않았을 때는 이전에 정렬된 sortedList를 재사용할 수 있어 성능상의 이점을 얻을 수 있습니다. 즉, list가 변경되지 않으면, sortedList를 다시 계산하지 않고 이전에 계산된 값을 사용합니다.

 

하지만 이 코드에는 한 가지 주의해야 할 점이 있습니다. list.sort() 함수는 원본 배열을 변경하기 때문에, 부수 효과(side effect)를 발생시킬 수 있습니다. React에서는 불변성을 유지하는 것이 좋으므로, sort 함수를 사용하기 전에 배열을 복사하는 것이 좋습니다. 예를 들어 return [...list].sort((a, b) => a - b);와 같이 사용할 수 있습니다.

 

// useReducer 는 Redux 나 ContextAPI 랑 뭐가 다른거임?

 

`useReducer` 훅은 React에서 상태 관리를 위해 사용되며, Redux 라이브러리나 Context API와 유사한 패턴을 제공합니다. 그러나 몇 가지 중요한 차이점이 있습니다:

1.스코프와 활용성:
   - `useReducer`: 주로 컴포넌트 내부 또는 매우 국소적인 상태 관리에 사용됩니다. 각각의 `useReducer` 인스턴스는 해당 컴포넌트 내에서만 상태를 관리하고, 다른 컴포넌트와 상태를 공유하지 않습니다.
   - `Redux`: 애플리케이션 전반에 걸쳐 광범위한 상태 관리를 제공합니다. Redux는 전역 상태 관리에 적합하며, 큰 규모의 애플리케이션에서 여러 컴포넌트 간 상태를 공유할 때 유용합니다.
   - `Context API`: 애플리케이션의 여러 컴포넌트에 걸쳐 데이터를 공유하는 데 사용되며, `useReducer`와 함께 사용하여 좀 더 구조화된 상태 관리 시스템을 구축할 수 있습니다. Context API는 중간 규모의 상태 공유에 적합합니다.

2. 성능:
   - `useReducer`는 리액트 컴포넌트 내에서 작동하기 때문에, 상태 변경이 해당 컴포넌트에만 영향을 미칩니다. 그 결과 성능상의 이점이 있을 수 있습니다.
   - `Redux`는 전역 상태를 관리하기 때문에, 상태가 변경되면 관련된 모든 컴포넌트가 업데이트되어야 합니다. 이는 때때로 성능 문제를 일으킬 수 있습니다.

3. 보일러플레이트와 복잡성:
   - `useReducer`는 상대적으로 단순하고, Redux나 Context API에 비해 적은 양의 보일러플레이트 코드가 필요합니다.
   - `Redux`는 보다 복잡한 설정과 추가적인 라이브러리(예: `redux-thunk`, `redux-saga`)가 필요할 수 있습니다.
   - `Context API`는 중간 정도의 보일러플레이트를 필요로 하지만, Redux보다는 덜 복잡합니다.

요약하면, `useReducer`는 컴포넌트 내부 또는 국소적인 상태 관리에 적합하고, Redux는 전역 상태 관리에, Context API는 중간 규모의 상태 공유에 적합합니다. 각각의 도구는 상황에 따라 서로 다른 장점을 가지고 있으므로, 상황에 맞게 적절한 도구를 선택하는 것이 중요합니다.