[TIL] 210817 오늘 공부는 리액트 불변성 관리

오늘은 동료 두 분의 코드 리뷰를 참관..? 엿듣기? 했다. 불필요한 코드를 줄이고, 효율적인 코드를 만들어내는 과정이 너무 좋아 보였고 배우고 싶었다. 대화의 한 50% 정도만 알아들은 것 같은데 언젠가는 다 알아듣는 날이 오겠지..? (코드좀 틈틈히 봐야겠다.

 

그 중에서도 오늘 불변성 관리에 대해서 좀 다시 알게 되었어서 그 부분을 정리해보고자 한다.

리액트에서 state는 불변성을 유지해줘야한다고 배웠다. state의 변화를 감지하고, 변화에 따라 리렌더링이 되기 때문이다. 

useState를 사용할 때, 

const [user, setUser] = useState("");

라는 코드가 있고, user를 바꿀때, setUser(userA) 이런식으로 바꾼다. 

만약 state의 일부만 바꾼다면, 아래처럼 기존 값들을 유지해주어야 할 것이다. 

setUser(...user,
user.name == "aaa" )

 

가령 이런 예를 들자면, B는 A를 복사했다. 얕은복사를 진행했고, 주솟값만 복사되었다. 그래서 true가 나왔다.

C는 스프레드 연산자로 A의 값들을 새 객체에 부었다. 즉 값은 같으나 주솟값이 다른 새로운 객체가 되었다. 그래서 객체와 객체는 다르므로 false가 나온다. 

const A = {a:1, b:2};
const B = A;
const C = {...A};

A === B  //(true)
A === c //(false)

 

이를, react의 useState에 다시 대입해보자면,  아래에 이런 코드가 있다. 

const [data, setData] = useState({ a:1, b:2})

 

만약 data의 a값을 3으로 바꾸고 싶다면?

const newData = data;
newData.a = 3;
setData(newData);

만약 이렇게 바꾼다면 불변성 관리가 될까?

newData는 data를 복사해서 만들었다. data의 값이 바뀌면 newData의 값도 바뀔 것이다(주소값이 같으므로)
newData의 a값을 바꿨다. data의 값이 바뀌므로 setData는 기존값과 현재값의 변화를 감지할 수 있을까? 

올바르지 않은 방식이다. 값이 공유되기 때문에 원하는 값을 예측할 수 없게 될 것이다. 

 

이렇게 바꾸는것이 좋아보인다.

const newData = {...data, a:3}l
setData(newData);

data라는 기존 값을 유지하면서, a의 값만 3으로 바꾸는 것이다. 스프레드 연산자를 통해 새로운 객체가 만들어진다. 주솟값(reference)이 다른 두개의 객체를 통해 setData는 참조값의 변화를 감지하고 state를 update 할 수 있을 것이다.

 

React에서는 값을 비교할때 얕은 비교를 실행하여 성능 최적화를 만든다고 한다. 그래서 불변성을 지키는 것이 중요하다는 것 ! ! !