인프런 커뮤니티 질문&답변

김동훈님의 프로필 이미지
김동훈

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.2) UI 구현하기

setState관련

작성

·

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

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

질문 주신 대로 코드를 작성하면 제대로 State가 업데이트 되지 않습니다.

그 이유는 input과 textarea에 사용자가 특정 텍스트 예를 들면 "a"를 입력해 onChange 이벤트가 발생하게 되면 setState 함수가 호출되면서 입력한 값을 그대로 새로운 State 의 값으로 변경시켜버리게 되는데요

그럼 state의 값이 onChange 이벤트 이후에는 객체가 아닌 문자열로 변경되기 때문에 state.author, state.content 등의 프로퍼티에 접근할 수 없게 됩니다.

김동훈님의 프로필 이미지
김동훈

작성한 질문수

질문하기