React - Hooks : prev state

  prev state 

 setState()와 prevState()는 리액트에서 컴포넌트의 상태를 변경하는데 사용되는 Hooks다.

setState는 이벤트나 서버 응답에 대하여 UI를 다시 업데이트 하기 위해서 사용되곤 한다. 

prevState는 컴포넌트의 이전 상태를 기반으로 한다. 

 

// Next.js는 react import를 생략한다. 

export default function CounterPage() {

	const [count, setCount] = useState(0);
    
	const onClickButton = () => {
		setCount(count + 1);
	};

return (
		<div>
        	<button onClick={onClickButton}>{count}</button>
        </div>
)
}

count라는 state를 만들고 카운터를 올릴 수 있는 함수를 만든다. 

버튼을 누르면 화면의 {count}는 1씩 증가한다. 

 

const onClickButton = () => {
		setCount(count + 1);
        	setCount(count + 1);
	};

 여기서 onClickButton 의 setCount(count + 1); 을 한 번 더 쓰면

예상되는 결과는 count가 2 오르는 것이다. 그러나 화면의 count는 1만 증가한다.

 

 이는 state의 원리와 관련있는데, state가 바뀌면 state를 사용하는 컴포넌트가 다시 만들어지고, 이를 리렌더링이라고 한다. state가 event나 다른 것에 의해 변경될 때 마다 리렌더링을 하면 처리해야하는 정보량이 너무 많아지기 때문에 react에선 그 정보를 임시메모리에 담아놨다가 함수가 끝나면 한 번에 처리 후 렌더링한다. 

 

 그래서 이전 상태의 값에 접근할 수 있는 방법을 쓴다. 

const onClickButton = () => {
		setCount((prev)=> prev + 1);
        	setCount((prev)=> prev + 1);
	};

 이렇게 prev를 쓰면 그 이전의 값에 1을 더하는 것으로 처리, count가 2씩 오르게 된다.