[React] useReducer()*

/* 정보 전달 목적의 글 보다는 공부하면서 기억하기 위해 적는 글입니다.
따라서 깊이가 얕으며, 잘못된 정보가 있을 수 있습니다. */

---

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

 

useState의 대체함수로, 여러개의 하윗값들을 포함하는 state를 다룰 때 유용하게 사용된다.

즉, 간단한 state라면 useState를 써도 되지만, 복잡한 state인 경우에는 useReducer를 쓰면 편하다.

setter 함수를 여러개 쓰지 않아도 된다는 소리다.

 

다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 
useState 보다 useReducer 를 선호합니다.
또한 useReducer 는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 
콜백 대신 dispatch를 전달 할 수 있기 때문입니다.

useReducer는 파라미터로 reducer, initialArg, init을 가진다.

reducer : 업데이트를 위해 필요한 정보를 담은 action (reducer 함수)

initialArg : 해당 reducer의 기본 값

init : 초기 state를 조금 지연하여 생성함

 

useReducer는 반환값으로 state, dispatch를 반환한다.

state : 현재 가리키고 있는 상태

dispatch : 액션을 발생시키는 함수로, dispatch(action)과 같이 호출하면 된다.

 

useReducer의 간단한 예제

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <h2>{state.value}</h2>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  )
}

export default MyComponent;

 

button에 onClick을 연결할 때, 함수의 값을 넘겨줘야한다는 걸 잊지말자.dispatch({...})와 같이 적는다면, 그냥 함수를 호출해버린다.

 

useReducer의 장점

1. 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

2. 여러개의 하윗값들을 포함하는 state를 다룰 때 유용하다.

 

useReducer  VS useState ? 

useState : 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 일 때

useReducer : 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해질 때

 

react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook

 

useReducer  VS useState 비교 예시

 

- useState

 

import React, { useState } from "react";

const initailValue = {
  name: '',
  nickname: '',
}

const MyComponent = () => {
  const [state, setState] = useState(initailValue);

  const { name, nickname } = state;

  const onChange = e => {
    const nextState = {
      ...state,
      [e.target.name]: e.target.value,
    }
    setState(nextState);
  }

  return (
    <div>
      <input name="name" value={name} onChange={onChange}></input>
      <input name="nickname" value={nickname} onChange={onChange}></input>
      <h2>{name}</h2>
      <h2>{nickname}</h2>
    </div>
  )
}

export default MyComponent;

 

 

- useReducer

 

import React, { useReducer } from "react";

function reducer(state, action) {
  return {
    ...state,
    [action.name]: action.value,
  };
}

const initailValue = {
  name: '',
  nickname: '',
}

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initailValue);

  const { name, nickname } = state;

  const onChange = e => {
    dispatch(e.target);
  }

  return (
    <div>
      <input name="name" value={name} onChange={onChange}></input>
      <input name="nickname" value={nickname} onChange={onChange}></input>
      <h2>{name}</h2>
      <h2>{nickname}</h2>
    </div>
  )
}

export default MyComponent;

 

 

결론

state가 복잡할 때는 useReducer를 쓰자.

사실 아직 감이 안잡히는데, 쓰다보면 언젠가 알 수 있지 않을까?

 

 

---