[React] useState의 비동기 문제

취뽀 스테이션

• 게시판을 만들고 있다
• Toast ui Editor을 이용하여 만들고 있음
• editor입력 → editorRef.current?.getInstance().getMarkdown() 을 이용하여 content 값을 가져온 후
• 이를 useState의 setContent함수를 이용하여 넣어 content 내용을 firebase로 보내고 있었다.

문제 발생

• set함수가 비동기로 동작해서 그런지 최초 onSubmit 함수 실행시 setContent가 제대로 실행되지 않는다.
• 만일
  • ‘안녕하세요’ 입력 → 작성하기 버튼 누름 → onSubmit 함수 실행 → ‘안녕하세요 값을 가져옴’ → setContent(’안녕하세요’) → console.log(content) → 아무것도 안나옴
  • 그 다음 ‘반갑습니다’ 입력 → 위와 동일 → console.log(content) → ‘안녕하세요’ 출력

원인

• set함수가 비동기로 동작하기 때문에 발행한 문제가 맞았다.
• setContent를 통해서 content를 설정했다. (비동기)
• content를 콘솔에 찍음 (동기)
• 이렇기에 setContent가 content 설정을 완료하기 전에 console.log이 실행 된 것. 따라서 최초 실행시에는 빈 문자열이, 이후 실행시엔 이전 단계에서 설정한 content 값이 나왔던 것이다.

해결방법

• useEffect를 사용하였다.
• useEffect에 dependency를 content로 설정하여 content가 마운트 된 것을 감지하고 나서 함수를 실행하니 잘 해결 되었다.
• 이번 일을 계기로 useState의 비동기 동작에 대해서 더 잘 이해하게 된 것 같다.