Reducer 이해하기

두잇 리액트 타입스크립트 (~p.389) 공부중, redux와 reducer의 개념이 나오기 시작하면서 진도가 확 느려졌다. 며칠 째 이것만 이해하느라 노력중이다. 일단 이해한 내용 중 가장 와닿는 부분만 정리하고자 한다. (비전공자는 슬프다...)

아래 두 코드의 차이를 중점적으로 생각해보자.

먼저 이 글 Redux 작동 원리 (feat. rootReducer)을 보고 오면 이해가 더 잘 될지도?

리덕스 reducer

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppState } from '../store';

const Clock = () => {
  const today = useSelector<AppState, Date>((state) => state.today);

  const dispatch = useDispatch();
  useEffect(() => {
    const id = setInterval(() => dispatch({ type: 'setToday', today: new Date() }), 1000);

    return () => clearInterval(id);
  }, [dispatch]);

  return (
    <div className="flex flex-col items-center justify-center p-2">
      <p className="text-3xl text-blue-600">{today.toLocaleTimeString()}</p>
      <p className="text-2xl text-blue-400">{today.toLocaleDateString()}</p>
    </div>
  );
};

export default Clock;

useReducer

import { useEffect, useReducer } from 'react';
import { rootReducer } from '../store';

const UseReducerClock = () => {
  const [{ today }, dispatch] = useReducer(rootReducer, { today: new Date() });

  useEffect(() => {
    const id = setInterval(() => dispatch({ type: 'setToday', today: new Date() }), 1000);

    return () => clearInterval(id);
  }, [dispatch]);

  return (
    <div className="flex flex-col items-center justify-center p-2">
      <p className="text-3xl text-blue-600">{today.toLocaleTimeString()}</p>
      <p className="text-2xl text-blue-400">{today.toLocaleDateString()}</p>
    </div>
  );
};

export default UseReducerClock;

두 코드의 차이점

- import 차이

리덕스-reducer는 useSelector (useSelector의 타입을 지정하기 위한 AppState), useDispatch 이렇게 3개를 import 해야 한다.

하지만, useReducer는 그냥 useReducer만 import하면 나머지는 안에 넣기만 하면 끝이다. (넣는다는 표현이 좀 어설프긴 한데, 더 나은 단어를 못 찾겠다.)

궁금증

1. 굳이 리덕스의 reducer를 쓸 필요가 있나?
2. rootReducer를 따로 만들지 않고, useReducer 안에 써주는 편이 좋은가?
   (책에서는 따로 만들어서 import하지 않음)

GPT4 답변

1. I think the code is shorter and easier to write when using useReducer instead of redux' reducer. Then Is it always better to use useReducer?

Whether to use useReducer or Redux's reducer (or any state management library for that matter) depends largely on your application's requirements, its complexity, and your team's preferences. Here are some factors to consider:

Scale and complexity: Redux is a better fit for larger, more complex applications with multiple components that share and manipulate the same state. It helps manage global state that's accessed across many components and provides a predictable state container. useReducer is a good fit for managing local state within a component or a small application.

Middleware: Redux has middleware like redux-thunk or redux-saga for managing side effects, which useReducer lacks. If your application needs to handle complex side effects (like asynchronous data fetching), Redux might be a better choice.

2. Is it better to write reducer (rootReducer in this code) inside the useReducer hook instead of making it separately?

Generally, it's recommended to define your reducers outside of your component. This is for several reasons:

Reusability: Defining the reducer function outside the component means it can be reused in other parts of your application if necessary.

Testability: It's easier to test your reducer functions if they are separate from your component. You can easily import your reducer into a test file and test it with different action types and payloads to ensure it works as expected.

Readability and organization: Keeping your reducer function separate from your components can make your components cleaner and easier to understand. It can help separate the logic of how state changes (in the reducer) from the rendering logic (in the component).

Performance: Reducers are typically pure functions without side effects, and defining them outside of your component can avoid unnecessary re-creations of the function. In the specific case of useReducer, React assumes that the reducer function is pure and doesn't change between renders, so defining it inside the component might lead to unexpected behaviors if you're not careful.

Of course, if your reducer is very specific to a single component and won't be reused or tested, it might be fine to define it inside that component. But as a general practice, especially in larger applications, it's better to define them separately.