불변성

자바스크립트가 제공하는 데이터 타입은 총 7가지가 있다. 숫자(number) 문자열(string) 불리언(boolean) null undefined 심벌(Symbol) 객체(Object) 이 중에서 7번 객체 타입을 제외하고는 원시 타입(primitive type) 이라고 부르며 객체 타입은 영어로 reference type 이라고 부르기도 한다. 데이터 타입을 이렇게 구분하는 이유는 원시 타입과 객체 타입이 근본적으로 다른 점이 있기 때문이다. 크게 3가지 정도 생각해 볼 수 있다. 원시 타입은 변경이 불가능한(immutable) 값이다. 반면에 객체(참조) 타입은 변경 가능한(mutable) 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장 된다. 반면에 객체를 변수에..

이번 포스팅에서는 리액트 컴포넌트 성능 최적화 방법들을 알아보고자 한다. 컴포넌트가 리렌더링되는 경우는 다음과 같다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 forceUpdate 함수가 실행이 될 때 매번 하나의 변화가 생길 때 마다 모든 요소들이 다시 불러와 지면 그 갯수가 적을 때는 큰 차이가 없지만, 수 백개, 수 천개 그리고 그 이상의 요소들을 불러올 때 성능이 느려지게 될 것이다. 따라서 리렌더링을 시키는 요소들을 어느정도 통제해 줄 필요가 생기게 되는데, 여기에서 많이 쓰이는 함수가 React.memo() 함수이다. React.memo() 클래스형 컴포넌트에서는 shouldComponentUpdate라는 라이프사이클을 사용하면 되는데..