1. [js] 배열을 변경할때 리렌더링 일어나지 않음

const [plus, setPlus] = useState([{ a: '', b: '' }]);

const var1 = (a, b) => {
    {
      const var2 = plus.findIndex(e => e.idx == idx);
      if (var2 == -1) {
        const value = {
          a: a,
          b: b
        }
        setPlus([...plus, value]);
      }
    }
  }

usestate set에 새로운 배열 값을 추가했지만 리렌더링은 고요해서 또 땀이 삐질삐질...😅

배열 부분도 그렇고 아직 state에 대한 개념이 부족한 것 같다.

 

다시 차근차근 찾아보니 불변성을 지키지 못해 일어난 오류였던것 같다...

 

불변성이란?

불변성은 메모리 영역의 값을 변경할수 없게 직접적으로 변경하지 않고 새로운 값을 만들어내는 것으로
사본을 만들어쓴다. (깊은 복사)

const [plus, setPlus] = useState([{ a: '', b: '' }]);

const var1 = (a, b) => {
    {
      const var2 = plus.findIndex(e => e.idx == idx);
      if (var2 == -1) {
        const value = {
          a: a,
          b: b
        }
        const puls1 = [...plus, item]
        setPlus(puls1);
      }
    }
  }

이번에 쓴것처럼 참조 타입은 새로운 객체나 배열을 생성한 후 값을 넣어주어야 한다.

이렇게 했더니 리렌더링이 일어났다..!

 

깊은 복사 얕은 복사 조만간 다시 정리해봐야지..