Javascript 및 React의 불변성

React는 동적 사용자 인터페이스를 구축하기 위한 유명한 라이브러리입니다. 데이터 불변성은 함수형 프로그래밍 에서 나온 아이디어 이며 프런트 엔드 앱 디자인에 적용하면 많은 이점을 얻을 수 있습니다.

데이터 돌연변이란 무엇입니까?
데이터 변형에 대한 아이디어를 이해하려면 프로그래밍의 기초로 돌아가 자바스크립트에서 데이터 구조 를 비교할 수 있는 방법을 이해해야 합니다 . 기본 유형을 비교하는 것은 매우 쉽습니다.

let num1 = 10,
    num2 = 10;
num1 === num2; // true

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
obj1 === obj2; // false

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = obj1;
obj1 === obj2; // true

obj1.name = "unknown";
console.log(obj1.name); // unknown
console.log(obj2.name); // unknown

요컨대, 기본이 아닌 경우 ==와 ===연산자의 비교 변수가 참조됩니다. 값으로 비교할 수도 있지만 복잡한 데이터 구조에서는 깊은 동등성 검사 라고 하는 여러 개의 동등성 검사가 필요 합니다.

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
valueCompare(obj1, obj2); //true

// Input: obj1 and obj2
// Output: true if obj1 is equal to obj2 in terms of values
function valueCompare(obj1, obj2) {
   const keys1 = list of keys of obj1;
   const keys2 = list of keys of obj2;
   if (keys1.lenth !== keys2.length) return false;
   for each key in keys1: 
      if (key is not present in keys2) 
         return false;
      if (typeOf(keys1[key] != typeOf(keys2[key]))
         return false;
      if (keys1[key] is a primitive && keys1[key] !== keys2[key])
         return false;
      if (obj1[key] is non primitive):
         isEqual = valueCompare(obj1[key], obj2[key]);
         if(!isEqual) return false;
}

let obj3 = Object.assign({}, obj1, { name: "unknown" });
obj3 === obj1; //false

2] [].concat() : [].concat()변경할 수 없는 방식으로 배열 값을 변경하는 데 사용할 수 있습니다 .

let numbers = [10, 20, 30];
numbers[1] = 22; // This will not change reference to an array
// Instead what you can do copy list and perform update as below
let numbers = [10, 20, 30];
let changedNumbers = [].concat(numbers);
changedNumbers[1] = 22;
changedNumbers === numbers; // false

상태가 복잡한 경우(중첩된 개체 포함) 상태가 변경되었는지 여부를 확인하기 어렵습니다. 참조 동등성을 사용하여 객체를 비교할 때 다음 상태가 변경되었는지 여부를 확신할 수 없고 깊은 동등성 검사는 재렌더링 시간에 비해 더 많은 시간이 걸리기 때문에 심층 동등성 검사를 수행해야 합니다. 따라서 React는 상태 변경 비교 대신 모든 setState 호출에서 구성 요소를 다시 렌더링하는 것을 선호합니다.

상태를 최소화하는 것은 React의 모범 사례입니다.

감사 해요! 이 글이 도움이 되었으면 합니다 :)