React #4 | State 불변성

state 의 불변성

-> 랜더링이 필요 없는 부분에 대해선 state를 쓸 이유가 없지만,
어떤 값이 바뀔때마다 화면이 랜더링되서 값이 바뀌어야 할때, 랜더링을
다시 시켜야 할때 state 를 쓴다.

🔥state 가 불변성을 지키지 않으면 VirtualDOM이 감지 하지 못한다.🔥

따라, state는 변하지 않아야 한다 = 불변성

state가 불변성을 지켜야할 이유!

🚩"원본 데이터 훼손" 때문
-> 원본 데이터가 훼손이 되면 VirtualDOM인 가상돔은 변화가 된건지 인지하지 못하고 랜더링을 하지 못한다.
-> 랜더링이 필요 없는 부분엔 필요가 없겠지만, 랜더링이 필요할 경우 state를 쓴다.

ex) (state의 값이 객체나 배열일 때)

const obj1 = {1}
const obj2 = {}

obj === obj2 (T/F)
const obj3 = obj // obj3와 obj2가 같은 참조값을 가진다.

✅따라서 ,obj가 가지고 있는 객체값이 변경되면 obj3도 같은 객체를 
가지기 때문에 값이 변경된다. 즉, 원본 데이터의 훼손, 이러한 훼손은 예상치 못한 오류와 버그를 일으킬 가능성이 크다. (참조오류)

ex

import {useState} from 'react';

const State = () => {
const[state, setState] = useState('state 처음시작')


const [userList, setUserList] = useState([
 {
   id: 1,
   name: "사과"
 },
 {
   id: 2,
   name: "오렌지"
 },
 {
   id: 3,
   name: "자몽"
 }
])

const onClickEvent = (idValue, nameValue) => {
 setUserList([...userList, {id: idValue , name: nameValue}])
}

return(
 <>
   {userList.map((v) => (
     <div>
       {v.id}. {v.name}
       <button>삭제</button>
     </div>
   ))}
   </>
 )
}
export default State;

출력결과

->

userList.map((v) userList를 map(한줄한줄 읽는다)반복
userList의 넣은 id 값을 한줄한줄 읽어와 (v)값에 담고 , {v.id}. {v.name}
id와, name 값을 읽어온다.

([...userList, {id: idValue , name: nameValue}])
원본 데이터가 훼손 되지 않게 하기 위해 , ...userList 으로 작성.

{id: idValue , name: nameValue} id의

✅ 백엔드에서 받아오는 데이터의 형식의 대부분은 배열인 경우가 많다.
따라서, 이러한 배열들을 화면에 보여주기 위해 사용하는 함수.

• 배열일 경우에만 가능.