취뽀 스테이션
- 게시판을 만들고 있다
- 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의 비동기 동작에 대해서 더 잘 이해하게 된 것 같다.
