2024.08.26

setList를 호출한 직후에 console.log(list);를 실행하면, 콘솔에는 상태가 업데이트되기 전의 list가 출력됩니다.

이 문제는 React의 상태 업데이트가 비동기적으로 처리된다는 사실에서 비롯됩니다. React에서 setState 함수(setList와 같은)는 즉시 상태를 변경하지 않고, 상태 업데이트 요청을 예약합니다. 따라서, setList를 호출한 직후에 list를 콘솔에 출력하면 아직 새로운 상태가 반영되지 않았습니다.

 

 

이 코드에서는 newList는 list와 content의 현재 값을 기반으로 즉시 생성되므로, 이 시점에서는 React 상태 업데이트의 비동기 특성과 무관합니다( 동기적 데이터 구조 생성). newList는 이미 새로운 데이터가 포함된 배열이므로, 이 배열을 바로 콘솔에 출력하면, 추가된 항목이 포함된 최신 상태를 볼 수 있습니다.