[React] 리액트에서 불변성이란

🦄 불변성이란?

불변성이란? 메모리에 있는 값을 변경할 수 없는 것을 말한다. 

• 원시 데이터(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'})	//전개연산자 이요해 기존 값 복사 후 값 수정