배치 업데이트 - 팬레터 수정 기능 구현 중 궁금했던 부분

궁금했던 부분

아래 코드에서 상태 업데이트 시 setEditContent("")와 setClickedLetter({...clickedLetter, content: editContent})를 동시에 호출해도 문제가 없는데, 왜 그런지 궁금했다.
이렇게 쓰면 왠지 editContent가 이미 "" 로 업데이트 돼버렸을 것 같았기 때문이다.

  const handleCompleteEdit = () => {
    const updateLetters = letters.map((letter) =>
      letter.id === clickedLetter.id
        ? { ...letter, content: editContent }
        : letter
    );
    setLetters(updateLetters);
    setEditMode(false);
    setEditContent("");
    setClickedLetter({ ...clickedLetter, content: editContent });

    alert("수정이 완료되었습니다.");
  };

 

이유

React에서는 상태 업데이트가 비동기로 처되기 때문이다.

setEditContent("")와 setClickedLetter({...clickedLetter, content: editContent})는 동일한 렌더링 사이클에서 동시에 실행되지 않는다. React는 업데이트를 일괄 처리하고(배치처리), 한 렌더링 사이클 내에서 한 번만 업데이트를 수행한다.

따라서 setEditContent("")와 setClickedLetter({...clickedLetter, content: editContent})는 동시에 실행되지 않고, React 엔진이 상태 업데이트를 일괄적으로 처리하고 난 후에 각각 실행된다.

이런 특성으로 인해 업데이트가 비동기로 처리되기 때문에 이전 상태를 사용하여 다음 상태를 계산할 수 있다,.

 

만약 위 내용이 동기적으로 처리된다면 setEditContent("") 이후에 setClickedLetter({...clickedLetter, content: editContent})를 호출하면 editContent는 이미 빈 문자열로 설정되어 있을 것이다.