상태 불변성

상태 불변성(immutability)란 상태(state)가 변경되지 않도록 하는 것을 의미합니다. React에서는 상태가 변경될 때마다 컴포넌트가 다시 렌더링되므로, 상태 변경이 효율적으로 이루어지는 것이 중요합니다. 상태 불변성을 유지하면 여러 이점이 있습니다.

상태 불변성의 중요성

1. 효율적인 렌더링

React는 상태와 프로퍼티가 변화할 때마다 컴포넌트를 재렌더링합니다. 상태 불변성을 유지하면 React는 이전 상태와 현재 상태를 "얕게 비교(Shallow Compare)"할 수 있습니다. 즉, 두 객체의 참조 값만 비교하여 변경 여부를 판단할 수 있어 효율적인 렌더링이 가능합니다.

• 얕은 비교(Shallow Compare): 상태가 변경되지 않은 것으로 인식되면, 불필요한 재렌더링을 피할 수 있습니다.

const [state, setState] = useState({ name: 'Jane', age: 30 });

const updateName = (newName) => {
    setState(prevState => ({
        ...prevState,
        name: newName
    }));
};

2. 디버깅과 테스트의 용이성

상태 불변성을 유지하면 상태 변화가 예측 가능해지고, 디버깅이 쉬워집니다. 상태가 불변이므로, 특정 상태 변화가 어디서 발생했는지 명확히 알 수 있습니다.

• 시간 여행 디버깅: 상태 변화 기록을 기반으로 이전 상태로 돌아갈 수 있어, Redux 같은 라이브러리에서 유용합니다.

3. 코드의 가독성과 유지보수성 향상

상태 불변성을 유지하면 상태가 변경되는 로직이 명확해집니다. 이는 코드의 가독성을 높이고 유지보수성을 향상시킵니다.

4. 함수형 프로그래밍과의 호환성

불변성은 함수형 프로그래밍의 중요한 개념 중 하나입니다. 함수형 프로그래밍은 부작용을 최소화하고 순수 함수를 이용해 코드를 작성하기 때문에 상태 관리가 더욱 안전하고 예측 가능해집니다.

5. Immutable Data Structures의 사용

불변성을 유지하면서도 복잡한 데이터 구조를 쉽게 관리할 수 있습니다. 예를 들어, Immutable.js나 Immer를 사용하면 불변성을 손쉽게 유지할 수 있습니다.

Immutable.js 예시

import { Map } from 'immutable';

const state = Map({ name: 'Jane', age: 30 });
const newState = state.set('name', 'John');

console.log(state.get('name')); // Jane
console.log(newState.get('name')); // John

Immer 예시

import produce from 'immer';

const [user, setUser] = useState({ name: 'Jane', age: 30 });

const updateName = (newName) => {
    setUser(produce(draft => {
        draft.name = newName;
    }));
};

6. 불변성으로 인한 상태 변경 추적의 용이성

불변성으로 인해 상태가 변경될 때마다 완전히 새로운 객체가 생성되므로, 상태 변화 추적이 용이합니다.

결론

React에서 상태 불변성을 유지하는 것은 성능 최적화, 디버깅의 용이성, 코드의 가독성 및 유지보수성 향상이라는 여러 가지 중요한 이점을 제공합니다. 이는 React 애플리케이션의 성능과 품질을 높이는 데 중요한 역할을 합니다.

상태 불변성 유지 방법

React에서 상태를 불변하게 유지하는 일반적인 방법은 불변 데이터 구조와 불변 연산을 사용하는 것입니다. 예를 들어, 배열이나 객체의 복사본을 생성하여 변화를 적용하는 방식이 있습니다.

객체 상태 업데이트 예시

const [state, setState] = useState({ name: 'John', age: 30 });

// 상태를 불변성 있게 업데이트하기
const updateName = (newName) => {
    setState((prevState) => ({
        ...prevState,
        name: newName
    }));
};

배열 상태 업데이트 예시

const [items, setItems] = useState([1, 2, 3]);

// 배열에 새로운 아이템 추가하기
const addItem = (item) => {
    setItems((prevItems) => [
        ...prevItems,
        item
    ]);
};

// 배열에서 아이템 제거하기
const removeItem = (index) => {
    setItems((prevItems) => prevItems.filter((_, i) => i !== index));
};

불변성 도구

상태 불변성을 보다 쉽게 유지하기 위해 여러 도구들이 있습니다. 예를 들어:

• Immutable.js: 불변 데이터 구조를 쉽게 사용하게 해주는 라이브러리.
• Immer: 불변성을 유지하면서도 직관적인 API를 제공하는 라이브러리.

이러한 도구들을 사용하면 불변성을 보다 효율적으로 관리할 수 있습니다.

React에서 상태 불변성을 유지하는 것은 컴포넌트의 성능을 최적화하고 코드의 예측 가능성과 디버깅 용이성을 높이는 데 중요합니다.

++
Vue의 상태 불변성
반응형 시스템: Vue는 데이터의 반응성(reactivity)을 통해 상태 변화를 감지합니다. 즉, Vue는 객체나 배열의 변화를 직접 감지하고, 필요한 경우에만 DOM을 업데이트합니다. Vue에서의 상태는 불변성을 엄격히 요구하지 않지만, 일부 경우에 상태 불변성을 유지하는 것이 이점이 있을 수 있습니다.
Proxy 사용: Vue 3에서는 Proxy 객체를 사용하여 상태의 변화를 감지합니다. 이 덕분에 객체의 프로퍼티를 직접 변경해도 Vue는 이를 감지할 수 있습니다. 따라서 상태를 변경할 때 기존 객체를 직접 수정해도 문제가 되지 않습니다.

import { reactive } from 'vue';

setup() {
  const user = reactive({ name: 'Jane', age: 30 });

  const updateName = (newName) => {
    user.name = newName;  // Vue는 이 변화를 자동으로 감지
  };

  return {
    user,
    updateName
  };
}