리액트 불변성 (React)

• 불변성: 메모리에 있는 값을 변경할 수 없는 것
  (숫자, 문자 등의 데이터 vs 배열, 객체 함수 등)
• 숫자, 문자 등의 데이터는 원시데이터 라고 합니다.
• 원시데이터가 아닌 배열, 객체 함수 등은 수정했을 때 기존에
  저장되어 있던 메모리 저장공간의 값 자체를 바꿔 버립니다.

  function App() {
   const [obj, setObj] = useState({
     name: 'onejang',
     age: 21
   })
  return (
     <div>
       <div>{obj.name}</div>
       <button onClick={()=>{
         obj.name ='twojang'
         
         setObj(obj2)
         console.log(obj) // obj.name는 twojang으로 바뀌었으나 렌더링은 되지 않음
       }}>변경!</button>
     </div>
  	)
  }
     

리액트에서는 화면을 리레던링 할지 말지 결정할 때 state의 변화를 확인합니다.
state가 변하지 않았으면 리렌더링을 하지 않습니다.

리액트가 state가 변했다고 판단하는 기준은 
state의 변화 전 후의 메모리 주소를 비교합니다

만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 
않고 직접 수정을 가하면 값은 바뀌지만 메모리 주소는 변하지 않습니다.

즉, 개발자는 값을 바꾸었지만 리액트는 state에 변화가 없다고 판단하기 때문에
인지하지 못하게 됩니다. 그래서 결국 개발자가 의도한 리렌더링이
일어나지 않게됩니다. 위의 코드에서 state에 변화를 주려면

  
```javascript
const obj2 = {...obj} // 새로운 주소를 가진 객체로 복사 -> 렌더링
setObj(obj2)

위와 같이 변경해주어 새로운 주소를 가진 객체로 복사해주어야 합니다.
리액트의 불변성 유지에 대해 알아보았습니다!