불변성_TIL(36)

리액트는 배열과 객체의 불변성을 지켜주는게 중요하다고한다.

자바스크립트 심화에서 다룬 얘기중에 배열과 객체는 원시형이 아니라서 그 값을 직접 가지고 있는게 아니라 화살표, 즉 값을 가르키고 있는거라고 한다.

 

만약에 let arr = [1,2,3] 이면  arr라는 저장공간을 가지고 값 1,2,3을 가지고 있는 메모리의 위치를 화살표로 참조한다고 생각하면 되겠다.

그래서 내가 state에 저장해놓은 값을 변경하고 싶을 때 useState를 사용하는데

let [value,setValue] = useState([1,2,3]) 이라는 예시가 있다.

내가 근데 1을 5로 바꾸고 싶다면? 

value[0]=5;
setValue(value)

이렇게하고 브라우저를 하면 아무것도 변경되는게 없다 분명 나는 setValue를 사용했고 리렌더링이 되야하는데😂

 

이 이유는 내가 기존의 참조하고 있는 메모리의 값을 바꿔버렸기 때문이다.

원래의 값이랑 바뀐값이랑 달라진게 없어서 리렌더링이 일어나지 않은 것이다.

value [0]-> 1 인거를 내가 ->5로 값을 바꿔놓고 setValue(value)를 하면 컴퓨터는 기존의 값 5,2,3이 바뀌지않았다고 생각한다.

 

그래서 이 기존의 값을 지켜주기 위해서 그 배열을 사용할땐 값을 복사를 한다.

리액트에서는 스프레드 문법을 많이 사용한다고 한다.

 

let value2=[...value]

value2[0]=5;

setValue(value2);

이렇게 해주면 기존의 value값을 들고오는데 스프레드문법을 통해서 그 값을 다 헤쳐주고 다시 괄호를 닫아 새로운 배열로 복사를 한다.

그럼 새로운 화살표, 즉 새로운 참조를 가지게 되고 그 새로운 참조에서 값을 바꿔준다.

그리고나서 setValue()로 기존의 value에 새로운 value2를 넣어주면 나머지값을 유지되고 변경된값만 바뀐것을 확인 할 수 있다.

 

이 내용이 되게 별개아니라고 생각을 했는데 직접 투두리스트나, 간단한 글 작성페이지를 만들어보니까

내가 이 불변성을 잘 지키지못한채 코드를 짜고있는것 같았다.

그래서 종종화면에 리렌더링이 안되는것을 경험했는데 이번에 이 내용에 대해서 쫌 더 알게 된거같다.

불변성 끝😎