[React] useReducer, memo, useMemo

React를 100% 활용하기 위해서 반드시 알아야 하는 개념이다.

 

1) 상태 관리 방식 (useState → useReducer)

2) 불필요 렌더링 방지 (memo, useMemo, useCallback)

3) 비동기/데이터 관리 (React Query, SWR)

 

1. useReducer란?

state 변경 로직을 한 곳에 모아서 액션(action) 기반으로 상태를 바꾸는 방식이다.

 

만약 useState를 쓴다면 예를들어

const [count, setCount] = useState(0);

function up()    { setCount(count + 1); }
function down()  { setCount(count - 1); }
function reset() { setCount(0); }

 

이렇게 로직이 여러함수로 분산된다.

조건이 늘어나면 setCount 안에 if문이나 반복문등을 우겨넣기 시작하는데 이러면 가독성이 매우 떨어지고

state 변경 규칙이 중구난방으로 흩어질 위험도 있기 때문에 유지보수가 굉장히 어려워진다.

 

그래서 useReducer를 사용하면

function reducer(oldCount, action) {
  if (action === 'UP') return oldCount + 1;
  if (action === 'DOWN') return oldCount - 1;
  if (action === 'RESET') return 0;
}

const [count, dispatch] = useReducer(reducer, 0);

 

이렇게 state 변경 로직이 reducer 하나에서 관리할 수 있어서 편리하다.

 

 

<useReducer의 기본문법>