[성능 개선] useState, SetStateAction: prev state에 대한 고찰

useState는 비동기이다. 그렇기 때문에 동기적으로 처리해야할 상황이 온다.

 

const Maker = () => {

    const [ cards, setCards ] = useState();

 

    // #1

    const createOrUpdateCard = () => {

        const updated = { ...cards };
        updated[ card.id ] = card;
        setCards(updated);

    }

 

 // 위 처럼 state의 이전값을 ...cards에 복사하여 변수로 선언한다. 그리고 해당 변수를 setCard 함수의 인자에 넣어 state값을 업데이트 하는데... 업데이트 하는 시점에 state값이 변경되었을 수도 있다. 이미 기존 state값을 변수에 선언하였기 때문에 이 state값은 OLD한 상태이다. 즉, 동기처럼 작동되지 않을 수도 있다.

 

// setCards = SetStateAction의 정의를 살표보면 SetStateAction은 이전 값을 받아서 새로운 값을 리턴해주는 콜백함수로써도 사용할 수 있다. 그렇기 때문에 prev state값을 변수로써 저장해 OLD한 상태로 사용하는 것이 아니라 setCards 함수가 실행되는 것과 동시에 prev state값을 참조해 state값을 업데이트하는 것이 안전하고 더 정확하다.

   

    // #2

    setCards(cards => {
        const updated = {...cards};
        updated[card.id] = card;
        return updated
    });

}