[리액트]useReducer란?

본 내용은 아래 강의에 대한 복습내용입니다.

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지| 이정환 Winterlood - 인프런 강의

 

---

useReducer란?

컴포넌트 내부에 새로운 State를 생성하고, 그 상태의 변경 로직을 외부함수(reducer)로 위임하는 리액트 훅이다.

모든 useState는 useReducer로 대체가 가능한, 한마디로 useState의 확장형 이라고 보면 된다.

 

상태의 변경로직을 외부함수로 위임하기 때문에 상태를 변경하는 코드를 컴포넌트 외부로 분리할 수 있다는 장점이 있다.

(useState는 컴포넌트 내부에 상태 관리 코드를 작성해야한다) 

---

 

먼저, useReducer 를 이용해 화면에 1씩 +,- 된 값을 렌더링 해주는 코드를 봐보자.

import { useReducer } from "react" 

 function reducer(state, action){
   switch(action.type){
    case 'INCREASE' :
        return state + action.data
    case 'DECREASE' :
        return state - action.data
    default :
        return state;
   }
 }

const Exam = () =>{
  
    const [state,dispatch] = useReducer(reducer,0);

    const onClickPlus =()=>{
        dispatch({
            type : "INCREASE",
            data : 1,
        })
    }

    const onClickMinus =() =>{
        dispatch({
            type : "DECREASE",
            data :1,
        })
    }

    return <div>
        <h1>{state}</h1>
        <button onClick={onClickPlus}>+</button>
        <button onClick={onClickMinus}>-</button>
        </div>
}

export default Exam

 

---

기본 문법 구조

//useReducer
const [state, dispatch] = useReducer(reducer, 기본값);

//useState
const [state,setState] = useState(기본값)

 

기존의 useState와 비교해보자.

state는 똑같이 상태값을 나타낸다.

setState가 상태변화함수를 의미했다면 useReducer에서 dispatch는 상태변경을 "요청"하는 함수다.

그리고 reducer는 상태가 어떻게 변할지를 정의한 함수다.

 

reducer함수란?

reducer는 상태(state)와 액션(action)을 받아서 새로운 상태를 반환하는 함수다.

여기서 action은 어떤 변화가 일어나야하는지에 대한 설명 객체이다.

 

---

 

그럼, 다시 전체 코드를 다시 보면,

사용자가 버튼을 누르면 이벤트 핸들러 함수가 호출되고, 그 함수 내에서 dispatch함수를 호출한다.

dispatch함수가 호출되면 리액트는 자동으로 reducer함수를 실행한다.

그러면 reducer함수에서 액션객체를 받아 새로운 state값을 반환한다.

최종적으로 리렌더링 되는 구조인 것이다.