2023-02-04(불변성 & 순수함수)

리액트에서 불변성은 아주 중요한 문법이라고 한다.

• 불변성 : 메모리에 있는 값을 변경할 수 없는 것이라고한다.

✅ 불변성이 있는 것

• 원시데이터라고도 한다.
• 숫자, 문자, 불리언 등등 여러 데이터들이 해당한다

✅ 불변성이 없는 것

• 원시데이터가 아닌 것들은 불변성이 없는 것
• 객체, 배열, 함수 등등이 해당한다.

---

❓ state와 불변성은 어떤 관계가 있을까?

let obj = {
	name : "kim"
    age : 26
}
let obj2 ={
 obj.name = "park"
 }			//obj의 이름은 jjunjjun으로 바뀌지 않는다

이처럼 객체에서 kim 에서 park으로 바꼈으니까 state도 바뀌었겠지 라고 생각할 수도 있지만 리액트에서는 어떻게 인식되느냐? -> obj는 여전히 똑같은 주솟값을 바라보고있으니까 안 바뀌었다고 인식한다. 그러므로 화면으로 렌더링이 안 된다. 그렇기에 불변성을 지켜주는 것이 너무 중요하다
(⭐이유 : 불변성이 없다면 화면상에 렌더링이 되지 않는다, state되지 않는다)

❓ 그럼 이 불변성이 없는 것들은 어떻게 쓸까?
원시데이터가 아닌 것들(함수 객체 배열)들은 state를 시켜도 화면상으로 렌더링이 안 되니까 새로운 변수를 만들어서 원본의 객체를 복사해와야한다.
--> 그 복사 방법이 spread문법이다.

function App() {
	const [obj, setObj] = useState({
		name: 'junyuck',
		age : 26,
	});
  return (
	<div>
		<div>{obj.name}</div>
		<button onClick={() => {  
			obj.name = 'junyuck2';
			const obj2 = {...obj}
			setObj(obj2);
		}}
		>
		난버튼이요
		</button>
	</div>

1. obj2라는 새 배열을 생성
2. 배열 안에 ...을 쓰고 obj를 넣는다-->그게 spread문법
3. obj.name = "junhyuck2" 라는 새 값을 넣어준다

🍀알게 된 점🍀
배열이나 객체가 나올때는 새 배열을 생성해서 거기에 값을 넣어주고 렌더링을 시켜야한다. ===> spread, map, filter 함수들이 불변성을 지켜주는 메소드들 중 하나이다.