불변성(immutable)이란

불변성(immutable)이란

• 메모리에 있는 값을 변경할 수 없다.
• 원본 데이터를 변경시키지 않고 새로운 데이터를 생성해야한다.

자바스크립트의 데이터 형태

1. 원시 데이터는 불변성O → (원본 데이터를 변경시킬 수 없다.)

//변수의 저장 구조
 
                              //     number, secondNumber
let number= 1;                //주소 |      0x1000        |
let secondNumber= 1;          //값  [        1           ] 


console.log(number === secondNumber); // 1000주소의 1 === 1000주소의 1 true;
//해석: 변수의 이름은 다르지만, 같은 메모리의 값을 바라보고 있다.


number= 2;               //     [secondNumber]  [ number ] 
                        // 주소  |   0x1000   |  |  0x1001 |
                        // 값   |     1      ]  [    2    ]

console.log(number) // 1001주소의 2
console.log(secondNumber); // 1000주소의 1  
//원시 데이터는 불변성이 존재하는 걸 알 수 있다. 
//해석: 기존 메모리에 저장이 되어 있는 1이라는 값이 변하지 않고, 새로 메모리 공간을 만들어 2라는 값을 할당한다.

2. 참조형 데이터(객체, 배열)는 불변성X → (원본 데이터를 변경 시킬 수 있다.)

                              

 //객체의 저장 구조

let obj_1 = {name: "kim"};      //       obj_1               obj_2
let obj_2 = {name: "kim"};     //주소     0x1000              0x1001 
                               //값    name: "kim"        name: "kim"

console.log(obj_1 === obj_2); // 1000주소의 값 === 1001주소의 값 false
//해석: 서로 다른 메모리를 형성하여 바라본다.




                                //      obj_1          obj_2
obj_1.name = "Lee"            //주소    0x1000         0x 1001   
                              //값    name: "Lee"    name: "kim"


// 객체, 배열, 함수는 불변성 없다.(메모리의 값을 변경 시킬 수 있다.)
// 해석: 기존 메모리 저장공간에 있는 {name: ‘kim’} ==> {name : ‘Lee’} 로 바뀌어 버리는 것을 통해 알 수 있다.

리액트의 데이터의 불변성

1) 화면을 리렌더링 할지 말지 결정할 때는 state의 변화를 확인한다.
2) state가 변했는지 변하지 않았는지 확인하는 방법은 state의 전, 후의 메모리 주소를 비교한다.
3) 데이터를 수정할 때 값을 직접 수정하면 값은 변경 되지만 메모리 주소는 변함이 없기 때문에 리액트는 state가 변했다고 인지하지 못한다.

순수함수

: 하나 이상의 인자를 매개변수로 받으면, 그 인자를 변경하지 않고, 참조하여 새로운 값을 반환하는 함수이며 외부에 존재하는 값을 불러와 사용해서는 안된다.
ex) spread operator, map, filter 등

Side Effect(부작용)

• 객체 값에 접근해서 직접 데이터를 변경할 경우, 이 객체와 연결되어 있는 다른 데이터가 변경됨에 따른 예상치 못한 버그(부작용)를 일으킬 수 있다. 또한,
  명령형/절차적 프로그래밍하게 되어 규모있는 프로젝트를 만들게 되면 유지보수가 어려워진 스파게티 코드를 보게될 확률이 높다