불변성을 지켜라

출처: ChatGPT

React에서 불변성을 지킨다는 것은 상태(State) 및 속성(Props)을 변경할 때, 기존의 데이터를 직접 수정하지 않고 새로운 데이터를 생성하는 것을 의미합니다.

불변성을 지키는 방법은 다음과 같습니다:

1. 배열의 경우, push, pop, splice와 같은 메서드 대신 concat, slice, map과 같은 메서드를 사용하여 새로운 배열을 생성합니다.

    // Bad
    this.state.todos.push(newTodo);
    // Good
    this.setState((prevState) => ({
      todos: prevState.todos.concat(newTodo),
    }));

2. 객체의 경우, 직접 속성을 변경하는 대신 객체 전개 연산자(...)나 Object.assign을 사용하여 새로운 객체를 생성합니다.

    // Bad
    this.state.user.name = 'John';

    // Good
    this.setState((prevState) => ({
      user: {
        ...prevState.user,
        name: 'John',
      },
    }));

React에서 불변성을 지키는게 중요한 이유

React는 불변성을 유지하는 상태 업데이트를 감지하여 가상 DOM을 효율적으로 업데이트합니다. 변경된 부분만 감지하고 업데이트하므로 성능이 향상되고, 예측 가능한 동작을 제공할 수 있습니다.