[React] useState 함수형 업데이트

useState을 동시에 여러번 set을 할 때 동작

import { useState } from 'react';

function App() {
    const [value, setValue] = useState(0);

    const onClick = () => {		// y: 저장하여 다음 렌더링에 사용될 state 값, x: 이번 렌더링의 초기(시작) state 값
        setValue(value + 1);	// y = x + 1 => 2
        setValue(value + 1);	// y = x + 1 => 2
        setValue(value + 1);	// y = x + 1 => 2
    };

    return (
        <>
            <h1>{value}</h1>
            <button onClick={onClick}>+</button>
        </>
    );
}

export default App;

• 버튼을 한 번 누르면 1이 출력이 된다.
• setState는 비동기적 특성 때문이며 리액트가 효율적으로 렌더링을 하기 위해 여려개의 상태 값 변경 요청을 batch(일괄처리) 처리하기 때문이다.
• setState는 변경된 사항을 기억하지 않기 때문에 마지막 업데이트만 적용되어 다른 렌더링에 사용하게 된다.

useState 함수형 업데이트로 사용

import { useState } from 'react';

function App() {
    const [value, setValue] =  useState(0)

    const onClick = () => {			// z: 함수형 업데이트를 통해 생겨난 값, y: 저장하여 다음 렌더링에 사용될 state 값 또는 이번 렌더링에서 업데이트된 값, x: 이번 렌더링의 초기(시작) state 값
        setValue(prev => prev+1)	// z = y + 1 => 1, z를 y에 저장
        setValue(prev => prev+1))	// z = y + 1 => 2, z를 y에 저장
        setValue(prev => prev+1))	// z = y + 1 => 3, z를 y에 저장
    }

    return (
        <>
            <h1>{value}</h1>
            <button onClick={onClick}>+</button>
        </>
    );
}

export default App;

• 버튼을 한 번 누르면 3이 출력이 된다.
• 함수형 업데이트는 업데이트된 값을 저장하기 때문에 여러번의 업데이트가 적용되어 다음 렌더링에 사용된다.

예제코드

import { useState } from 'react';

function App() {
    const [valueX, setValueX] =  useState(0)
    const [valueY, setValueY] =  useState(0)

    const onClick = (e) => {
        setValueX(prev => prev + 1);
        setValueX(prev => prev + 1);
        setValueY(valueX + 1)
    }

    return (
        <>
            <h1>valueX : {valueX}</h1>
            <h1>valueY : {valueY}</h1>
            <button onClick={onClick}>+</button>
        </>
    );
}

export default App;

• 버튼을 한 번 누르면 2, 1이 출력이 된다.