React에서 상태값을 다룰때 불변성의 개념에 대해 알고 넘어가자

---

불변성(immutable) "변하지 않는 성질"

프로그래밍에서 불변성을 지킨다는 뜻은 ?

메모리 영역의 값을 직접적으로 변경하지 않는다는 의미이다

const [state, setState] = useState(초기값)
에서 setState(변경할값) 함수가 실행될때 변경되기 전의 상태와 비교해서 그 값이 다르면 re-rendering이 된다.

이때 불변성을 지키지않고, 메모리 영역의 값을 직접 변경하면 리액트는 state가 바뀌었다고 인지하지 못한다 (렌더링이 되지 않음)

왜냐하면 리액트는 이전 state와 이후 state를 비교할 때, 얕은 비교(Shallow Compare) 때문이다

얕은 비교는 javaScript에서 배운 내용을 생각해보자

1. 원시타입 (Primitvie type)

• boolean, number, string
• 불변성을 가지고 있다
• 변수에 원시 타입의 값을 할당하면, 메모리에 값 자체가 저장된다
• setState() 사용시 따로 고려할 문제가 없음

2. 참조타입 (Reference type)

• Object
• 불변성을 가지고 있지 않다
• 변수에 참조 타입의 값을 할당하면, 메모리값이 담긴 주소가 저장된다
• setSate() 할때 값이 불변성을 가지도록 하여 호출해야하는 문제가 있다

//state가 객체형태일때
const [info, setInfo] = useState({
  count: 0,
  show: true,
  operator: operators[0]
})

state의 접근은 info.count info.show info.operator 형태로 나타내고
setState를 나타내는 방법은 setInfo({...info, show: !info.show}) 스프레드 연산자를 사용하거나,

잘못된 접근

• info.show = !info.show
• const newInfo = info

state가 객체형태이기 때문에 주소만 복사하여 리액트가 객체가 변경되었다고 인지하지 못한다

array도 참조타입이므로 위와같이 사용한다

const [array, setArray] = useState(["a", "b", "c", "d"])

• 잘못된 접근

  		array[0] = "e"; //재할당
  		const newArray = array;
  		//setArray(newArray) : 주소만 복사되므로 변화 인지 못함

• 올바른 접근

  		1 setArray([...array, newItem])
  		2 setArray(array.filter(arr=>{조건})
   		//새로운 배열을 반환하는 메소드를 사용