React_setState : 원본데이터 변경하지 말고 새로운 배열을 생성하자

내가 처음에 작성한 코드 

sortItem = () => {
      this.setState({ 
        flag : !this.state.flag,
        serverData : this.state.serverData.sort((a,b)=> 
        {return this.state.flag ? a.price-b.price : b.price-a.price} 
        ) })
    }

 

GPT가 알려준 잘못된 점

주어진 코드에서 this.state.serverData.sort() 메서드를 호출하면, 원본 배열인 this.state.serverData를 직접 변경하는 것입니다. 그리고 이 변경된 배열을 다시 setState 메서드로 설정하여 상태를 업데이트합니다.

그러나 React에서는 상태(state)를 업데이트할 때 직접 원본 데이터를 수정하는 것은 권장되지 않습니다.  React는 가상 DOM(Virtual DOM)을 사용하여 효율적인 렌더링을 수행하는데, 이 과정에서 이전 상태와 새로운 상태의 차이점을 비교해야 합니다. 만약 원본 데이터가 직접 수정되면, 비교 과정이 제대로 이루어지지 않아 예상치 못한 동작이 발생할 수 있습니다.

따라서 정렬된 배열을 업데이트할 때에는 새로운 배열을 생성하여 사용해야 합니다. 아래 코드처럼 수정해보세요:

 

sortItem = () => {
  this.setState(prevState => ({
    flag: !prevState.flag,
    serverData: [...prevState.serverData].sort((a, b) =>
      prevState.flag ? a.price - b.price : b.price - a.price
    )
  }));
}

위의 코드에서는 sortItem 메서드 내부에서 [...prevState.serverData]와 같이 새로운 배열을 생성하고, 이를 정렬한 후에 상태 업데이트에 사용합니다. 이렇게 하면 React가 올바른 비교 및 렌더링을 수행할 수 있습니다.

 

정리

1. React는 가상 DOM을 이용하여 효율적인 렌더링을 수행한다.

2. 이를 위해 이전 상태와 새로운 상태의 차이점을 비교해야 한다.

3. 원본 데이터가 직접 수정되면, 비교과정이 제대로 이루어지지 않는다.

4. setState 사용시 state 원본 배열을 직접 수정하지 말고, 새로운 배열을 생성하여 원본 배열과 비교한다.

 

 

코드 출처 :

선생님 블로그 https://syleemomo.tistory.com/