[React] 리액트에서 불변성을 지켜야하는 이유

 

불변성

데이터를 수정할때에,

원시데이터는 불변성이 있기때문에 새로운메모리 저장공간 새로 만들고 그것을 바라보게 하는 방법으로 수정하고 ,

참조형데이터는 불변성이 없어 메모리에 저장되어 있는공간에서 값을 바꿔버리는데, 불변성이 없는것들 때문이다

 

즉,리액트에서

화면이 바뀌어야 할때 컴포넌트가 수정이 되는데 이는 스테이트 바뀌어야 화면이 바뀐다.

 

이과정에서 리액트가 스테이트가 바뀌는지 안바뀌는지 알려면,

메모리 주솟값이 바뀔때 인식을 하기때문에 불변성을 유지하는것이 중요하다.

 

function App () {
	const [obj, setObj] = useState({name : "0yheon", age : 21 });
    return(
        <div>
            <div>{obj.name}</div>
            <button
                onClick={()=>{
                    obj.name = "1yheon";
                    console.log(obj);
                    setObj(obj);
                }}
            >
            버튼
            </button>
        </div>
    )
}

버튼을 클릭하면 객체값이 console.log(obj.name)//1hyeon 으로 변경되지만.

 

<div>{obj.name}</div> 컴포넌트에서는 여전히 0hyeon이다.

메모리를 참조하는 주솟값이 바뀌지 않기 때문이다

 

 

 

<button
    onClick={()=>{
        obj.name = "1yheon";
        const obj2 = {...obj}
        setObj(obj2);
    }}
>

 

해결법은 위와같이 스프레드 연산자를 통해 새로운 객체로 복사를 해주면 됨.