React - 그렇게 많은 상태가 필요하지 않을 수 있습니다!

구성 요소가 필요로 하는 모든 것에 단일 상태를 사용하지 않는다는 것을 아마 알고 계실 것입니다.
그러나 이를 피하면서 때때로 필요한 각 항목에 대해 상태를 하나로 분할해야 한다고 느낄 수 있습니다.

하지만 그럴 필요는 없습니다!

함께 변경되는 항목이 있는 경우 함께 묶을 수 있는 이벤트의 "폭포"를 설정하게 됩니다.

양식 예:

다음과 같은 양식 예시가 있다고 가정해 보겠습니다.

function FormExample(){
    ???

    return (
        <form>
            <input name="data1" />
            <input name="data2" />
            <input name="data3" />
        </form>
    )
}

세 가지 상태로 나눌 수 있습니다.

const [data1, setData1] = useState(data1Default)
const [data2, setData2] = useState(data2Default)
const [data2, setData3] = useState(data3Default)

하지만 다음과 같이 할 수도 있습니다.

const [allData, setAllData] = useState(dataDefault)
// and then...
const updateData = (event) => {
    setAllData((oldState) => ({
        ...oldState, 
        [event.target.name]: event.target.value
    }))
}

이를 통해 입력 이름을 지정하는 한 한 번에 모든 상태를 업데이트할 수 있습니다.

그리고 form 일 필요는 없습니다. 데이터가 항상 함께 변경되는 곳은 분할할 필요가 없는 곳입니다.

그리고 한 조각이 다른 조각에 의존하는 경우 이를 처리하거나 값을 종속성으로 사용하거나useEffects 오래된 데이터가 표시될 위험이 있는 경우 더 힘든 시간을 갖게 됩니다.

TIL: 이것은 중첩 데이터에서도 작동합니다!

후크의 종속성 배열은 중첩된 데이터[data.like.this]와 함께 작동하며 그뿐만 아니라… 거기에 없을 수도 있는 데이터가 있어도 작동합니다!
따라서 전체 개체를 [data?.optional?.chaining] 값으로 배열에 분할하거나 배치한 다음 if 대신 상태를 한 곳에 두고 do stuff를 사용할 수 있습니다.


TLDR: 데이터가 다른 위치에 있는 것이 타당한 경우 분할하고, 그렇지 않으면 데이터를 읽을 수 있고 유지 관리할 수 있는 한… 한 상태를 고수하는 것을 고려할 수 있습니다.


표지 사진 작성자: Kelly Sikkema on Unsplash