React 5 불변성

정의

함수의 불변성은 함수가 호출되면 함수에 전달된 인자나 함수 내부의 상태를 변경하지 않은 원칙을 나타냅니다 불변성은 프로그램의 안정성과 예측가능성을 향상시키며 코드를 이해하고 유지모수 하기 쉽게 만듭니다

함수의 인자는 변경되지 않음

함수가 호출되면 그 함수에 전달된 인자는 변경되지 않아야 합니다 이것은 함수 내에서 전달된 인자의 값을 변경하지 않는다는 것을 의미합니다

function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

이떄 함수 add 를 호출할때 인자로 3 , 5를 전달되는데 이 3하고 5가 그대로 연산이 되어서 return 이 되는것입니다

함수 내부 상태는 불변

함수 내부에서 사용되는 지역변수나 상태는 불변해야 합니다 새로운 값을 생성하고 원래의 값을 생성하지 않아야 합니다

function incrementCounter(counter){
    
    const increseCounter = counter + 1;

    return increseCounter;
}

let count = 0;
count = incrementCounter(count);
console.log(count); // 1

지금같은 경우 incrementCounter 에서 인자를 전달할때 이전상태를 변경하지 않고 새로운 변수 increseCounter 를 선언해서 여기에 +1 을 하고 새로운 상태를 반환을 하고 있습니다

객체나 배열을 새로운 객체나 배열을 생성해서 반환

객체나 배열은 참조타입이기 떄문에 직접 변경하면 이전 상태를 참조하는 모든 변수에 영향을 미칩니다 그래서 새롭게 값을 업데이트 할때는 이전 상태를 불변한채로 새로운 객체 또는 배열을 만들어서 반환해야 합니다

function updatePersonName(person , newName){

    return {...person , name: newName}
}

const john = { name: 'John', age: 30 };
const updatedJohn = updatePersonName(john, 'Johnny');

console.log(john)
console.log(updatedJohn)

function updateArray(array, index, updateData) {
  
  const newArray = [...array];

  newArray[index] = updateData;

  return newArray;
}

const originArray = [1 ,2 , 3]
const newArray = updateArray(originArray , 1 , 10)

console.log(originArray)
console.log(newArray)

지금보는 이 둘은 각각 참조변수인 배열과 , 객체에서 각각 불변성을 유지하기 위해서 새로운 객체를 만들거나 , 새로운 배열을 만들어서 return 을하고 이때 원본 객체 또는 배열에 영향이 가지 않게끔 하고 있습니다

객체 또는 배열에서 불변성을 지키지 않을때

function updatePersonName(person , newName){

    person.name = newName
    return person
}

const john = { name: 'John', age: 30 };
const updatedJohn = updatePersonName(john, 'Johnny');

console.log(john)
console.log(updatedJohn)

지금같은 경우는 불변성을 지키지 못했다 객체가 들어오면서 name 이라는 속성을 직접 변경을 하고 return 을 하게 된 상태이다 이때 최초 선언된 john 변수 또한 참조타입이기 떄문에 바뀐 데이터가 현재 보여지고 있는것이다 이런것은 현재 불변성을 지키지 못한것이다

function upateArray(array , index , updateData){

    array[index] = updateData;
    return array;
}

const originArray = [1 ,2 , 3]
const newArray = upateArray(originArray , 1 , 10)

console.log(originArray)
console.log(newArray)

이렇게 보더라도 현재 originArray 가 훼손이 된것을 알 수 있습니다

불변성의 장점

1. 안정성 및 예측 가능성 불변성을 유지하면 함수의 동작이 예측가능하며 코드의 안정성이 향상됩니다

2. 디버깅과 유지보수 용이성 불변한 코드는 디버깅이 쉽고 유지보수가 간편하며 코드의 복잡성을 줄일 수 있습니다

3. 성능 최적화 일부 상황에서는 불변성을 유지하는 코드가 성능을 향상시킬 수 있습니다 예를 들어 React 에서는 불변성을 통해 컴포넌트 업데이트를 최적화 합니다

4. 함수형 프로그래밍 지원 함수형 프로그래밍에서 불변성은 핵심 원칙중 하나이며 불변한 데이터 구조를 사용하면 함수형 프로그래밍의 장점을 최대한 활용할 수 있습니다

단점

1. 메모리 사용량 증가 아무래도 새로운 객체를 만들다 보니 이런 이슈는 발생할 수 밖에 없다 그러다 보니 데이터가 긴 배열 같은 경우 배열을 복사하는데 시간이 소요 될 수 있습니다

2. 복잡성 증가 불변성을 유지하는데 코드가 복잡해질 수 있습니다 특지 중첩된 객체나 배열의 경우 필요한 부분만 업데이트 하는 추가적인 로직이 필요할 수 있습니다