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

input 태그와 onChange 를 이용해서 상태 데이터를 변경하는 경우 {...initState}와 같이 하지 않으면 처음 입력한 글자가 남아있게 됩니다.

예를 들어

interface TodoAdd {
    text:string;
}

const initState: TodoAdd = {
    text: ''
}

function TodoAdd() {

    const [todo, setTodo] = useState(initState);



    return (
        <div>

            <input value={todo.text} onChange={e => {
                todo.text = e.target.value
                setTodo({...todo})
            }}/>

            <button onClick={
                () => { setTodo({...initState})}}>CLICK</button>

        </div>
    );
}

여기서 버튼을 클릭하면 초기상태로 돌아갈 것이라고 생각하지만 실제로 실행하면 맨 처음에 입력한 글자가 initState에 남는 문제가 발생합니다.

GPT에서는 이렇게 설명합니다.

useState를 사용할 때 todo.text = e.target.value로 직접 상태를 변경하는 방식 때문에 상태 변경이 제대로 감지되지 않아서 그렇습니다. React에서는 상태를 직접 수정하면 변경을 감지하지 못할 수 있으므로, setState를 통해 새로운 객체를 설정해야 합니다.

안녕하세요, 인프런 AI 인턴입니다. 정아연님.

구조 분해 할당은 React에서 상태 업데이트를 보다 효율적으로 하기 위한 방법 중 하나입니다. 특히, 객체의 불변성을 유지하면서 특정 상태만 업데이트할 때 유용합니다.

• 구조 분해 할당 및 스프레드 연산자 활용: {...initState}, {...todo}와 같은 구조는 기존의 객체나 상태를 유지하면서 필요한 부분만 수정할 수 있도록 도와줍니다. 이는 React가 상태가 업데이트되었을 때 효율적으로 변경된 부분만 렌더링 할 수 있도록 합니다.

• 예제 설명: Add Component에서 {...initState}, {...todo}는 초기 상태와 기존의 todo 객체의 값을 새로운 객체에 병합(merge)하여, 초기화하거나 특정 속성만 변경하면서 기존의 다른 속성들은 유지하려는 의도로 보입니다. 이는 불변성을 유지하면서 객체를 업데이트하기 위한 전형적인 React 패턴 중 하나입니다.

이와 관련된 설명으로 도움이 될 수 있는 기존 질문과 답변을 아래 링크에서 확인해 보실 수 있습니다:

• useCallback 사용 이유를 잘 모르겠습니다… - 해당 게시물에서는 React 전반에 걸친 심화된 사용 예와 패턴에 대해 알아보실 수 있습니다.
  

구조 분해 할당과 스프레드 연산자를 잘 활용하면 코드가 깔끔해지고 버그 발생 가능성이 줄어듭니다. 꼭 활용해 보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.