불변성 : 값이나 상태를 변경하지 않는 것??? 이해가 안 되니 일단 마저 읽어보시죠
1. 효과적인 상태 업데이트
리액트의 상태 업데이트에 대한 기본 원리
부모 컴포넌트가 리렌더링을 하면 자식 컴포넌트도 리 렌더링 하게 되며, 객체의 속성 하나하나를 비교하는 것이 아니라 참조값만 비교하여 상태 변화를 감지한다.
만약에 불변성을 지키지 않는다면 상태 변화를 감지할 수가 없을 것이다! 그래서 원본 데이터를 직접 수정하는 것이 아니라 복사본을 만들어서 사용한다 즉 얕은 비교를 실행하여 성능 최적화를 만들어내게 된다!
2. 사이드 이펙트 방지
원시 타입은 불변성의 특징을 가지고 있지만, 참조 타입인 경우 새로운 값을 변경할 때 원본 데이터가 변경된다(즉 불변성이 지켜지지 않는다) 원본 데이터가 변경될 경우 데이터를 참조하고 있는 다른 객체에서 사이드 이팩트가 발생할 수 있는 여지가 있다
** 사이드 이펙트
리액트 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다.
어떤 데이터를 가지고 오기 위해서 외부 API를 호출하는 경우에 일단 화면에 렌더링 할 수 있는 것들을 먼저 엔더 링 후 실제 데이터는 비동기로 가져오는 것을 권장한다! 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 늦어지거나 응답이 없더라도 영향을 최소화할 수 있어서 사용자 경험 측면에서 유리하기 때문이다!
참초📌
https://velog.io/@yes3427/React-Side-Effect
[React] Side Effect란?
React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side Effect라고 한다. 대표적인 예로어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우,일단 화면에
velog.io
https://hsp0418.tistory.com/171
리액트 불변성이란 무엇이고, 왜 지켜야 할까?
들어가면서 리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있습니다. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서
hsp0418.tistory.com
'FE > 개념정리' 카테고리의 다른 글
| JS - Promise.all은 언제 사용 할까? (0) | 2023.02.27 |
|---|---|
| TS - 유틸리티 타입 Omit (0) | 2023.02.12 |
| JS - Throttle 와 Debounce (0) | 2023.02.02 |
| JS - 원시 타입 vs 참조 타입 (0) | 2023.01.17 |