useReducer로 복잡한 상태 처리하기

import {useState} from "react";

const firstUser = {
    id: "0391-3233-3201",
    firstName: "Bill",
    lastName: "Wilson",
    city: "Missoula",
    state: "Montana",
    email: "bwilson@mtnwilsons.com",
    admin: false
}

function User() {
    const [user, setUser] = useState(firstUser);

    return (
        <p>Email: {user.email}</p>
        <p>Location: {user.city}, {user.state}</p>
        <button>make admin</button>
    )
}

상태를 관리할 때 일반적으로 저지르는 실수로 상태를 덮어쓰는 경우가 있다.

<button
    onClick={() => {setUser({ admin: true }); }}
>
    Make Admin
</button>

이렇게 하면 firstUser의 상태를 덮어써서 방금 setUser 함수에 전달한 {admin:true}로 변경한다.

<button onClick={() => {setUser({ ...user, admin: true); }}>
  Make Admin
</button>

이렇게 하면 초기 상태를 받아서 새로운 키 / 값 쌍인 {admin: true} 를 넣는다. 코드의 모든 onClick 에 대해서 코드를 이런 식으로 바꿔야 한다. 이 과정에서 실수를 저질르기가 쉬운데 리듀서를 사용하면 이를 쉽게 해결 할 수 있다.

function User() {
    const [user, setUser] = useReducer(
        (user, newDetails) => ({...user, ...newDetails }),
        firstUser
    );
}

이제 새로운 상태 값을 리듀서에 보내면 프로퍼티가 객체에 추가되거나 기존 프로퍼티가 갱신된다.
상태가 여러 하위 값으로 구성되거나 다음 상태가 이전 상태에 의존적일 때 이런 패턴이 유용하다.

참고 문헌

러닝 리액트

>> Home

useReducer로 복잡한 상태 처리하기

이동욱

2022/04/16

참고 문헌