useState 기초와 올바른 업데이트

목표: useState가 어떻게 작동하는지, 그리고 변경이 이전 값에 의존할 때 상태를 올바르게 업데이트하는 방법을 배웁니다.

• 상태 값 + 설정 함수
• 업데이트 일괄 처리
• 함수형 업데이트

useState는 배열을 반환합니다: [value, setValue]. setValue를 호출하면 다시 렌더링되도록 예약되며, 리액트는 성능을 위해 여러 업데이트를 일괄 처리할 수 있습니다.

상태를 만들고 클릭할 때 업데이트합니다. 기본적인 setState 흐름을 보여 줍니다.

다음 상태가 이전 상태에 의존한다면, 일괄 처리된 업데이트 사이에서 오래된 값을 읽는 문제를 피하기 위해 함수형 업데이트를 사용합니다.

• setX(prev => prev + 1)
• 여러 번 호출해도 안정적으로 작동합니다

하나의 처리 함수에서 설정 함수를 여러 번 호출할 때는 올바른 최종 값을 얻기 위해 함수형 업데이트가 필요합니다.

팁:

• count++처럼 변수를 직접 변경한 뒤 리액트가 알아차리기를 기대하지 마십시오. 항상 설정 함수를 사용해야 합니다.
• 다음 값이 이전 값에 의존할 때는 함수형 업데이트를 사용합니다.
• 여러 상태 설정 호출은 일괄 처리될 수 있습니다.

복습: useState는 값과 설정 함수를 제공합니다. 리액트는 업데이트를 일괄 처리하며, 이전 값에 기반해 변경할 때는 함수형 업데이트를 사용합니다.