불변성이란?
react에서는 불변성을 지켜야 한다고 말한다. 불변성이 무엇인지부터 알아보자.
불변성은 어떤 객체나 배열의 내부 값이 직접 변경되지 않아야 한다는 것을 의미한다.
불변성을 지키기 위해서는 새로운 배열, Object를 생성해서 할당한다.
let arr1 = [1, 2, 3];
arr1.push(4); // 배열을 직접 건드렸으므로 불변성을 해치게 된다.
arr1 = [1, 2, 3, 4]; // 새로운 배열을 할당했다. 참조값이 바뀌게 된다.
// or
arr1 = [...arr1, 4];
arr1 = arr1.concat(4);
어떤 배열이 불변성을 지킨다면 그 배열은 immutable 하다고 말하기도 한다. 불변성은 immutability라고 한다.
React에서 불변성을 지켜야 하는 이유
이전 state와 현재 state 값이 달라진 것을 참조값이 변화했는지로 따지기 때문이다. 새로운 객체가 할당되었는지를 trigger 삼는 셈이다. React는 object 안의 값을 깊게 비교하지 않고, 참조값이 바뀌었는지 비교하는 얕은 비교를 한다. 덕분에 좋은 성능을 유지할 수 있다.
불변성을 지키지 않는다면 객체 내부의 값을 바꿔도 React가 업데이트를 알아차리지 못하기 때문에 의도한 것과는 다른 결과가 나올 수 있다. 그렇기 때문에 애초에 React에서 불변성을 지키지 않는다면 경고를 뱉는다.
그렇기 때문에 setState로 상태 값을 바꿀 때 spread 연산자(...)를 사용하거나 이전 값과 결합한 새로운 객체 혹은 배열을 생성하는 Object.assign(), Array.concat()를 사용하는 것이다. 원본의 복사본으로 기존 값을 대체한다.
불변성 지키기 위한 메소드 정리
- Array.slice() - 기존 배열의 복사본을 생성한다.
- Array.concat() - 기존 배열에 concat() 안의 값을 연결한 새로운 배열을 반환한다.
- Object.assign() - 첫번째 파라미터로 온 객체에 두번째 파라미터로 온 객체를 결합한 다음, 새로운 객체를 반환한다.
- Spread 연산자 (...) - [...prevState, 5] 처럼 기존 값을 엘레먼트로 갖는 새로운 배열을 생성할 수 있다.
- 기타 map, filter 등 배열 메소드 - callback 함수에 해당하는 동작을 한 다음, 결과값을 넣은 새로운 배열을 반환한다.
Array.splice()는 기존 배열을 변경하는 방법이기 때문에 상태 변경 등 불변성을 유지해야 할 때는 쓰지 않는다.
'Front-end > React' 카테고리의 다른 글
[React] ckEditor5 사용법 및 미리보기 기능 구현 (0) | 2023.06.29 |
---|---|
[React] 윈도우 리사이징 예제로 알아보는 throttle (0) | 2023.06.18 |
[react] Redux 시작하기 (0) | 2022.08.28 |
[React] react-router-dom v6 브라우저 뒤로가기 이벤트 감지 (history.action 대체) (0) | 2022.08.24 |