1. 문제 상황

버튼을 클릭할 때마다 아래의 함수를 실행하여, boolean데이터가 들어가 있는 변수의 값을 뒤집어 그 상태에 따라 글 제목의 값을 변경하려고 하였음

function toggleTitle(){
	setMan(!man);
	const updatedTitle = [...title];
	updatedTitle[0] = man ? '남자코트 추천' : '여자코트 추천';
	setTitle(updatedTitle);
}

기본적으로 이 코드는 동작했지만 항상 첫 번째 클릭엔 반응하지 않고, 두 번째부터 동작하는 모습을 보였음

2. 문제 원인

근본적인 원인은 setState함수는 사이클 종료 후에 실행되기 때문이었음

setMan(!man) 으로 man의 상태를 변경해도, 이 변경 사항은 이번 사이클이 끝난 후에 반영됨

따라서 아래의 코드들은 man의 이전 상태를 기준으로 실행됨

첫 번째 클릭에는 반응하지 않고 두 번째부터 동작하는 것이 아니라,

상태 변경이 반영되지 않아 글 제목이 계속해서 지난 사이클의 상태를 참조하고 있는 것이었음

3. 문제 해결

다음과 같이 변경된 상태를 글 제목이 즉시 반영할 수 있도록 수정하였음

function toggleTitle(){
    setMan(prevMan => {
      const newMan = !prevMan;
      const updatedTitle = [...title];
      updatedTitle[0] = newMan ? '남자코트 추천' : '여자코트 추천';
      setTitle(updatedTitle);
      return newMan;
    });
  }