🦄 불변성이란?
불변성이란? 메모리에 있는 값을 변경할 수 없는 것을 말한다.
- 원시 데이터(string, number, boolean, null, undefined, Symbol): 불변성 있다.
- 원시데이터는 수정시, 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장
- 원시 데이터가 아닌 데이터(Object타입: 객체, 배열, 함수 ..): 불변성 없다.
- 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경
자바스크립트에서 기본형 데이터와 참조형 데이터의 불변성 정리: https://yooneeee.tistory.com/40
🦄 리액트에서 상태 불변성
- 리액트에서 불변성의 지키는 것이 중요한 이유
👉 리액트가 상태 업데이트를 하는 원리때문
- 리액트가 화면을 리렌디링하는기준
- state가 변하면 리렌더링!
- state가 변하지 않으면 리렌더링 x
- state가 변했는지 변하지 않았는지 확인하는 방법?
- state의 변화 전, 후의 메모리 주소를 비교
- 즉, 배열이나 객체의 속성 하나하나를 비교하는 것이 아닌 이전 참조값과 현재 참조 값만을 비교해 상태변화를 감지한다.(얕은 비교 수행)
- 원시데이터는 값 변경시 가리키는 메모리 저장공간이 바뀌어 상태변화를 감지 가능 👉 리렌더링 됨!
- 원시데이터가 아닌 데이터를 불변성 지켜주지 않고 직접 수정시, 메모리 주소가 변경되는 것이 아닌 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꾼다 👉 리액트가 상태변화 감지 못함! 👉 리렌더링 안됨!
🦄 리액트에서 불변성 지키는 방법
- 불변성을 지킨다: 객체 및 배열을 직접적으로 수정 x 👉 기존 객체말고 새로운 객체를 만들어 새 객체에 원하는 값 덮어 씌우기
- spread, operator, map, filter, slie, reduce 등 새로운 배열을 반환하는 메소드 활용
- 리액트배열에서 push, splice는 되도록이면 사용x 👉 이들은 모두 배열을 직접 수정하는 메서드
- setState 사용시, 원시타입의 경우엔 값을 바로 넣어 주어도 되지만, 참조타입의 경우 새로운 객체나 배열을 생성한 후에 값을 넣어주어야 함!
// 원시타입
const [number, setNumber] = useState(0)
setState(3)
// 참조타입
const [person, setPerson] = useState({ name: '', age: 20 })
setState({...person, name: 'yoon'}) //전개연산자 이요해 기존 값 복사 후 값 수정
'리액트' 카테고리의 다른 글
[React/Warning]Each child in a list should have a unique " key" prop. (0) | 2023.04.18 |
---|---|
[React] Props란, Props Children (0) | 2023.04.18 |
[React] CRA란? CRA로 리액프 트로젝트 생성하기 (1) | 2023.04.18 |
[React] 리액트에서 onClick 이벤트핸들러에 매개변수(파라미터) 전달하기 (0) | 2023.04.17 |
[React] 함수형 컴포넌트의 생명주기(Life Cycle) (0) | 2023.04.15 |
댓글