React - 불변성&순수함수

1. 불변성

1. 불변성이란?

메모리에 있는 값을 변경할 수 없는 것

• 원시 데이터는 불변성이 있고, 객체, 배열, 함수는 불변성이 없다.

let number = 1;
let secondNumber = 1;

console.log(number === secondNumber); // True

let obj_1 = {name: 'kim'};
let obj_2 = {name: 'kim'};

console.log(obj_1===obj_2); // False

obj_1과 obj_2는 각각 주소를 가리키고 있다.

데이터를 수정할 땐 어떻게 될까?

• 원시 데이터의 경우 불변성이 있다. number = 2라고 새로운 값을 할당하면 기존 메모리에 저장 되어 있는 1이라는 값은 변하지 않고, 새로운 메모리 저장공간에 2가 생기고 number는 새로운 메모리 공간에 저장된 2를 참조하게 된다.
• obj_1.name = 'park' 라고 새로운 값을 할당한다면 객체는 불변성이 없기 때문에, 기존 메모리 저장공간에 있는 값이 바뀌게 된다.

리액트에서 원시데이터가 아닌 데이터의 불변성을 지켜주는 것이 왜 중요할까?

리액트에서 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인한다. state가 변했는지 변하지 않았는지를 확인하는 방법은 state의 변화 전, 후의 메모리 주소를 비교하는 것이다. 불변성을 지켜주지 않고, 직접 수정을 가하면 메모리주소는 변함이 없게 되는데, 리액트에선 이를 인식하지 못하고 리랜더링이 발생하지 않게 된다.

불변성 지키기 예시

function App(){
	const [dogs, setDogs] = useState(["말티즈"]);
    
    function onClickHandler(){
    	setDogs([...dogs, "푸들"]);
    }
...

spread operator를 통해 dogs를 복사하고 항목을 추가해준다.

2. 순수함수

인자를 변경하지 않고, 참조하여 새로운 값을 반환하는 함수

const addSixPure = (arr)=>{
	newArr = [...arr, 6];
    return newArr;
};

순수함수가 왜 중요할까?

1. 컴포넌트의 많은 루틴을 순수 함수로서 작성하기를 요구하고 있다.

• 컴포넌트에서 state와 props가 같으면, 항상 같은 값을 반환해야 한다.

2. 컴포넌트의 상태값은 불변 객체로 관리해야만 한다.

• 수정할 때는 기존 값을 변경하는 것이 아니라, 같은 이름의 새로운 객체를 생성한다.

3. 이를 통해, UI 개발의 복잡도를 낮추고, 버그 발생 확률도 줄인다.