• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

setState관련

23.08.08 04:25 작성 조회수 230

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 등의 프로퍼티에 접근할 수 없게 됩니다.