[TIL] 불변성이란 무엇일까

불변성이란

불변성은 메모리 주소에서 값이 변하지 않는걸 의미한다. 따라서 변수를 초기화 해주고 그 안에 값을 담을 때의 값과 변수에 재할당 해준 값의 메모리 주소는 서로 배정받은 각각의 주소를 참조한다.

let num = 1;
num = 10; // 변수 이름은 같지만 다른 메모리 주소를 갖고 있다

리액트에서 불변성을 지켜야 하는 이유

리액트에서는 기본적으로 useState를 통해 상태값을 변경해줘야 하기 때문에 값 자체가 불변성을 유지하고 있다.
이에 따른 이점은 객체로 만든 원본데이터를 유지하며, 복사된 데이터를 쓰기 때문에 사이드 이펙트(side effect) 즉 원하지 않는 결과를 도출하는 걸 방지한다. 또한, 가상 돔에서 상태값을 변경한 걸 화면에 렌더링 해줄 때 복사본과 원본데이터의 값을 비교 과정을 확인 할 수 있어 유용하다.

불변성을 지키는 배열 메서드

slice, map, filter, reduce, spread operator, 구조분해할당 등을 통해 새로운 배열을 반환하거나 복사할 수 있다.
대체로 데이터는 배열 메서드를 사용하기 위해 데이터를 대괄호로 [ ] 감싸주고, 그 안에 데이터들은 key(분류이름), value(값) 형태로 저장하기 위해 객체를 뜻하는 중괄호로 { } 감싼 딕셔너리 자료형으로 많이 사용한다.

1) slice

슬라이스는 원본 배열을 수정하지 않고 원본의
일부 요소를 잘라내고 새로운 배열을 반환한다.

let numArray = [1, 2, 3, 4, 5]

let num = numArray.slice(0, 2); // 0번 인덱스부터 2개 자름
console.log(numArray); // [1, 2, 3, 4, 5]
console.log(num); // [1, 2]

2) map

map에 매개변수는 callback함수이기 때문에 return 을 통해 새로운 배열 반환한다. 화살표 함수를 사용하면 리턴값이 하나의 값일 때 return은 생략할 수 있다.

let testArray = [1, 2, 3, 4, 5];

let testMap = testArray.map((item) => item); // item으로 설정한 요소값을 반복해서 돌리고 반환해줌
console.log(testMap); // [1, 2, 3, 4, 5]

3) filter

filter도 마찬가지로 callback 함수이기 때문에 새로운 배열을 반환해준다. map과 유사하지만 리턴될때 조건이 true인 경우들만 반환된다.

let testArray = [1, 2, 3, 4, 5]

let testFilter = testArray.filter((item) => item === 1);
console.log(testFilter); // [1]

4) reduce

reduce는 연산을 모두 수행한 값을 반환해준다. acc는 누적된 값을 의미하고 cur은 현재 해당하는 요소값을 의미한다.

let testArray = [1, 2, 3, 4, 5]

let testReduce = testArray.reduce((acc, cur) => {
	const addArray = acc + cur
    return addArray
});
console.log(testReduce); // 15

5) spread operator

전개 연산자를 사용하면 ...을 사용해 배열안의 모든 요소를 복사할 수 있다.

let testArray = [1, 2, 3, 4, 5];
let spArray = [...testArray];

console.log(spArray) // [1, 2, 3, 4, 5]

6) 구조분해할당

구조분해할당은 배열이나 객체에 속성을 해체하여 그 값을 개별 변수에
담을 수 있게 하는 자바스크립트의 표현식이다.
특히 객체에서의 구조분해할당은 원본 객체가 있어야만 구조분해할당으로
변수에 담아줄 수 있다. 변수의 이름은 'name: testName' 콜론을 붙여서
다시 설정해 줄 수 있다. 콜론으로 이름을 다시 지어주면 바꿔준 이름으로만 사용이 가능하다.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

const testObj = {name: "홍길동", age: 30}
const { name: testName, age } = testObj

console.log(testName, age);