[React] State 업데이트 되는 시점

값이 바로 반영되지 않는 코드

export default function Player({name, symbol}) {
    const [isEditing, setIsEditing ] = useState(false);
    
    function handleEditClick() {
      setIsEditing(!isEditing); // schedules a state update to true
      setIsEditing(!isEditing); // schedules a state update to true
    }

   ...
}

• 컴포넌트가 처음 실행될 때 handleEditClick()은 해당 컴포넌트의 내장 함수이기에 isEditing의 시작 값을 저장한다.
• handleEditClick() 이벤트가 발생하여 setIsEditing(!isEditing)이 호출될 때 리액트는 상태 업데이트를 스케줄에 올려만 두지 !isEditing 명령을 즉각적으로 실행하진 않는다.
• 두 번째 setIsEditing(!isEditing)을 호출할 때도 아직 컴포넌트 함수 실행의 사이클이 도는 중이기에 isEditing의 초기 값을 기반으로 하여 업데이트 스케줄에 올려놓는다.

 

어떻게 하면 변경된 값을 바로 반영할 수 있을까?

function handleEditClick() {
  setIsEditing(editing => !editing); // false -> true
  setIsEditing(editing => !editing); // true -> false
}

• 함수 형태로 변경하면 된다.
• setIsEditing()이 가져오는 초기 값은 false이다. 그렇기에 첫 번째 함수의 editing은 false로 실행한다.
  • 인자로 사용된 editing 변수는 이전 상태 값이다.
  • 최신 상태를 가져와 사용하는 useState의 기본 특성이다.
• 두 번째 setIsEditing()은 첫 번째 함수 실행된 이후에 실행되면서 첫 번째 함수에서 실행된 값을 전달한다.
• 이렇게 함수 형태를 사용하면 가장 최신 값을 사용할 수 있다.