[TIL] 23_0118 리액트(React)에서 불변성 유지, todolist를 만들며..

리액트에서의 불변성 유지

리액트 같은 경우 주소값을 비교해서 변화를 감지하는 데, 직접적으로 값을 비교하면 리액트가 감지 못하고 감지하기 위해 페이지 리렌더링을 하게 돼. 

 

예를 들면, 최근 리액드로 투두리스트를 만들며, 불변성을 지키지 않으면 일어나는 에러를 겪었어. input 값을 비워주려고 직접 input의 value부분을 가져와서 동등연산자로 빈값을 주려고 하니까 경고같은 에러를 받았어. (아래 글)

A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

 

리액스에서의 불변성의 의미는 메모리 영역에서 값을 변경할 수 있게 한다는 거야. 이해한 바로는 직접 메모리 영역 부분의 값을 변경하지 않는 거지. 직접 변경하지 않고 간접적으로 배열이나 객체를 이용해서 새로운 값을 반환하게 해서 주소값만 변경하도록 하는 거야.  그러면 리액트가 변화 감지를 하게해서 효율적인 마운트를 할 수 있겠지. 

 

 

 

느낀점

- 불변성에 대해 직접 겪으니까 불변성이 뭔지 확 와닿더라. 역시 이론과 예시를 참고하면 좋지만 겪어보면 확실히 체감하는 구나 싶어ㅋㅋ 불변성이 대략 뭔지는 알고있었지만 익숙하지 않아서 사용하다보면 잊고 있는데 이번을 계기로 불변성 유지가 당연시 될 것 같아. 

 

 

 

 

 

*참고 사이트 

- https://narup.tistory.com/268 (불변성 설명이 무지 잘 되어있어서 좋은 듯)

- https://hsp0418.tistory.com/171