spread operate
React의 (state)상태는 변경불가성을 유지한다. 여기서 변경 불가성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.
불변값 (Immutable Value)
원시타입 Boolean true || false Number 정수 || 실수 String 문자열 Null Undefined불변의 예로 들 수 있는 js의 string은
let a = 'jungmin';
a = 'choi' + a;
변수 a에서 'jungmin’ 라고 선언된 데이터에 'choi'를 더해서 넣게되면 메모리에서는 기존 'jungmin’ 에 ‘choi’를 concat 할 거 같지만 그렇게 동작하지 않는다. 아예 새로운 데이터 메모리 공간을 확보하고 ‘choijungmin’를 할당하고 새로운 주소 값을 a 변수에 재 할당 해준다. 기존 'jungmin' 라고 선언되어 있는 값은 메모리에서 제거될 것이다.
가변값 (mutable value)
원시 데이터 타입(Primitive Type)이 아닌 참조 테이터 타입 (Reference Type)
참조 타입의 경우 원시타입과 다르게 메모리 상에서는 할당된 변수에 값을 직접 저장하지 않는다. 그래서 object에 저장된 값은 객체 인스턴스가 아니라 객체가 있는 메모리상 위치를 가리키는 포인터다.
예)let obj1 = { a: 1, b: 'bbb' };
해당 변수는 1002 번지에 변수 영역에 저장되고 데이터 영역에는 원시타입과 다르게 Object가 가지고 있는 프로퍼티의 길이만큼 프로퍼티 변수 메모리 할당 영역의 정보가 저장되어 있다. 이 property는 다시 각 값을 데이터 영역에서 값을 할당하고 주소 값을 저장하는데 여기서 프로퍼티의 값을 변경하고자 했을 때 obj1 의 데이터 참조 5001 번지의 주소값은 불변하지만 객체 변수의 a 프로퍼티의 값이나 b 의 값은 변경시 데이터 주소가 변경이 되기 때문에 가변값이라 불린다.
🤔React에서 상태값이 불변성을 유지해야 하는 이유
- 의도하지 않은 특정 객체가 변경되면 참조하고 있던 객체에서도 변경이 일어난다. 이 상태를 유지할 경우 생각지 못한 에러가 날수도 있고 프로그램 복잡도가 높아진다.
- 원본state를 수정하게 되면 props로 전달되는 값도 변경 되기 때문에 props를 전달 받는 하위 컴포넌트들이 전부 새로 렌더링 되게 되어 비효율적이다. 이럴때 원본을 건들이지 않고 원본을 복사하여 수정한 후 그 복사한 객체를 원본에 넣어주는 방법으로 해결할 수 있다. 변경이 일어난 객체의 property만 비교함으로써 React에서 최적화가 가능하다.
객체 복사하는 법 😊
Object.assign()과 스프레드 연산자(...)가 있다 두 방법 모두 완전한 복사(Deep copy)를 지원하지 않고 객체 내부의 객체는 얕은 복사(Shallow copy)를 하기때문에 객체의 depth가 깊은 경우 완전한 깊은 복사가 가능한 js 라이브러리인 Lodash을 사용하면된다.
참고
shouldComponentUpdate
React는 트리 변환에 대해 비교 알고리즘을 통해 변화된 엘리먼트만 실제 DOM에서 업데이트되는데 이 과정에서 원하지 않은 시점에 컴포넌트가 다시 렌더링되는 경우가 있다 이러한 경우 shouldComponentUpdate로 최적화가 가능만약 상태 값이 정말 변했다면 true를 반환하고 그렇지 않은 경우엔 false를 반환할 수 있다.
spread operate가 뭔지 왜 사용하는지 너무 이해하고 싶었는데 드디어 조금 이해한것같아 코드에 바로 사용해 보았다.
좋아요 하트를 누르면 mock Data에 있던 각 게시물의 heartCheck와 heartCount 값에 따라 좋아요상태와 좋아요 수가 나타나고 하트좋아요를 누르고 끌때 마다 좋아요 수가 증가,감소하는 기능
