3.5 state를 사용할 때 주의 사항

    클래스형 컴포넌트든 함수형 컴포넌트든 state를 사용할 때는 주의해야 할 사항이 있습니다. state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 합니다.

    예를 들어 다음 코드는 잘못된 코드입니다.

    // 클래스형 컴포넌트에서
    this.state.number = this.state.number + 1;
    this.state.array = this.array.push(2);
    this.state.object.value = 5;
     
    // 함수형 컴포넌트에서
    const [object, setObject] = useState({ a: 1, b: 1 });
    object.b = 2;

    그렇다면 배열이나 객체를 업데이트해야 할 때는 어떻게 해야 할까요? 이런 상황에서는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트합니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.