리액트 불변성과 State

리액트에서 불변성과 State는 큰 연관관계를 맺고있다.

리액트는 state가 변경될 때 리렌더링을 하게 끔 구현되어있다. 

즉 리액트가 화면을 렌더링 해주는 기준이 state가 변경되었을 경우에 해당한다.

따라서 일반변수를 할당해서 변경하더라도 리렌더링은 되지 않는다

하지만 useState를 통해 생성된 변수는 setState를 통해 값을 바꾼다면 react가 리렌더링을 해준다.

이 과정중에 중요한게 불변성이다.

primitive type은 불변성을 띄기 떄문에 setState를 통해 값을 바꾸는 경우 리액트가 인식하지만

Literal type의 경우에는 변수가 주소값을 가지고 있기 때문에 메모리의 내부 객체의 값을 변경하더라도 주소값은 변경되지 않기 떄문에 리렌더링을 해주지 못한다. 따라서 해결법을 위해 새로운 객체를 만들어 할당해줘 주소값을 바꿔줘야한다.

{...variable}을통해 새롭게 깊은복사를 해주면된다.

import './App.css';
import {useState} from "react";

function App() {
    const initObj = {name : "minki", age: "21"}
    const [literal, setLiteral] = useState(initObj);
    const [primitive, setPrimitive] = useState("");
    return (
        <div>
            <input onChange={(event) =>{
                let value = event.target.value;
                literal.name = value
                setLiteral({...literal})
                setPrimitive(value)
            }
            }/>
            <br/>
            {literal.name}
            <br/>
            {primitive}
        </div>
    );

}
export default App;