React 공식 문서를 통해 공부한 내용을 정리한 포스트입니다.
몰랐던 내용 위주로 정리했기 때문에 내용이 들쑥날쑥할 수 있습니다.
React는 컴포넌트의 순수성을 지향한다
순수함수란 동일한 입력에 동일한 결과를 기대하는 함수이다.
내부 변수를 직접 변화시킨다면 같은 입력을 넣어도 다른 값이 나올 우려가 있다. 이 때문에 setState등을 통해 불변성을 유지하려고 하는 것이 React의 특징이다. 순수성을 유지함으로써 사이드이펙트를 줄일 수 있다. React에는 컴포넌트의 순수성을 체크하기 위한 엄격 모드(Strict mode)가 존재하는데, 같은 컴포넌트를 2회 호출함으로써 같은 값을 반환하는지 체크한다.
React가 순수성을 지향하는 이유
리액트가 순수함에 신경쓰는 이유는 다음과 같다.
- 순수성을 지킨 컴포넌트는 동일한 입력에 동일한 결과를 반환하기 때문에 서버 등 다른 환경에서도 사용될 수 있다. 수많은 사용자 요청을 처리해도 같은 입력이라면 같은 결과를 반환한다.
- 입력이 변경되지 않는 컴포넌트라면 렌더링을 건너뛰어 성능을 향상시킬 수 있다. 순수 함수는 항상 동일한 결과를 반환하므로 캐싱해도 안전하다.
- 깊은 컴포넌트 트리를 렌더링하는 도중에 일부 데이터가 변경되는 경우 React는 즉시 리렌더링을 시작하면 된다. 순수성을 유지하고 있기 때문에 언제든지 연산을 중단해도 안전하다.
객체(배열)를 직접 변경하는 함수와 아닌 함수
push, pop, reverse, sort는 기존 배열을 변형시킨다.
반면 slice, filter, map 등은 기존 배열을 얕게 복사해 변형시킨 새로운 배열을 반환하므로 순수함을 유지하기에 좋다. 만약 props로 전달된 값(프로퍼티)을 직접적으로 push 등으로 변경하면 컴포넌트가 렌더링을 시작하기 전에 객체가 변경되므로 버그가 발생하기 쉽다.