React - State 업데이트, 불변성

우연히 state와 불변성에 대해 생각해보게 됐다.

분명히 같은 기능인데 handleDelBtn을 통해서는 변화가 바로 적용되고, handleAddBtn으로 전달한 키워드는 바로 업데이트 되지 않았다.

// DeleteBtn
function handleDelBtn(e) {
  let id = e.target.id;
  keywords = keywords.filter(keyword => keyword !== id);
  props.onClick(keywords);
}
 
// AddBtn
function handleAddBtn(e){
  let id = e.target.id;
  keywords.push(id);
  props.onClick(keywords);
}

Add를 할 경우에는 클릭이 되고, 분명히 상위 컴포넌트에서 확인해봐도 잘 전달됐는데 리렌더링 되지 않는 것이다. 그래서 이것저것 시도해보다가 push를 사용하지 않는 방법으로 바꿔보았다.

// AddBtn
function handleAddBtn(e){
  let id = e.target.id;
  // 이전 코드
  // keywords.push(id);
  // props.onClick(keywords);
  props.onClick([...keywords, id]);
}

이렇게 했더니 리렌더링이 바로 진행되었다. 이유가 뭘까 생각해보다가 filter와 push의 차이점을 찾아봤다.

filter는 조건에 맞는 요소들만 추려서 새로운 배열을 반환하는 함수이고(immutable),

push는 배열을 바꾸고, 변화된 배열의 길이를 반환하는 함수이다(mutable).

 

그래서 filter는 immutable하고, push는 mutable한 것 때문에 리렌더링 여부에 차이가 있나 싶어서 state에 대해서 더 검색해봤다.

참조타입인 array, object의 경우 내용이 바껴도 주소가 바뀌지 않기 때문에 React는 state나 props가 변경되었다고 알아차리지 못한다고 한다. react로 코딩할 때, 업데이트가 되지 않는다면 mutable한 방법때문인지 확인해보는 것이 좋겠다.

 

 

 

참고한 사이트

https://www.howdy-mj.me/redux/right-way-to-update-state/

Redux에서 state를 업데이트하는 올바른 방법 (불변을 지켜야하는 이유)