작성
·
265
0
20분경 나온 setState관련해서 미리 코드를 짜보았었는데용
<div className="DiaryEditor">
<h2>오늘의 일기</h2>
<div>
<input
value={state.author}
onChange={(e) => {
setState(e.target.value);
}}
/>
</div>
<div>
<textarea
value={state.content}
onChange={(e) => {
setState(e.target.value);
}}
placeholder="내용을 입력해주세요"
/>
</div>
</div>
이렇게 짜도 정상적으로 작동이 되는데 더 깊이 들어가서 문제가 생기는 경우일까요??
답변 1
0
안녕하세요 이정환입니다.
질문 주신 대로 코드를 작성하면 제대로 State가 업데이트 되지 않습니다.
그 이유는 input과 textarea에 사용자가 특정 텍스트 예를 들면 "a"를 입력해 onChange 이벤트가 발생하게 되면 setState 함수가 호출되면서 입력한 값을 그대로 새로운 State 의 값으로 변경시켜버리게 되는데요
그럼 state의 값이 onChange 이벤트 이후에는 객체가 아닌 문자열로 변경되기 때문에 state.author, state.content 등의 프로퍼티에 접근할 수 없게 됩니다.