React에서 useState로 상태 관리를 할 때 setState를 사용하면 부분 랜더링이 발생합니다. 그런데, setState를 사용해도 다시 랜더링이 안되는 문제가 있습니다. setState는 비동기적으로 동작하기 때문에 사용후 디버깅에서 값을 찍어보면 바로 적용되지 않는데요. 잠시 후 다시 디버깅 값을 찍어보면 상태가 변경된걸 확인할 수 있습니다. 그런데, 이번 문제는 setState를 사용했음에도 Re-rendering이 발생하지 않았습니다. 그래서, 변경점이 있으면 무조건 랜더링하게 하려고 useEffect에 추가했는데도 변화가 없네요-_-;

setState에는 3개의 오브젝트가 각각 배열을 담고 있습니다. 분명 배열의 크기가 변경되었는데 왜 랜더링이 발생하지 않을까요? JS는 배열에 값이 추가되어도 같은 주소를 참조하기 때문에 값에 변화가 없다고 판단합니다. 객체의 주소가 바뀌는건 아니니까요. 결국엔 참조된 주소를 바꿔줘야 setState에서 변경되는걸 감지할 수 있었습니다. JS에서 ... 와 같이 점 3개를 찍는 문법을 Spread Operator라고 부릅니다. [...array] 이렇게 사용하면 기존의 array를 해제한 후 배열을 다시 넣어줍니다. 이렇게하면 객체가 가지고 있는 배열이 새로운 주소값을 할당받아서 Re-rendering이 발생하게 됩니다.

  const deselectChange = (value: string[], index: number) => {
    if (isMultiple) {
      depths.forEach((d: any, i: number) => {
        if (index < i) {
          optionItems[d.value] = []
        }
      });

      // 랜더링이 발생하지 않음.
      // setSelectedOptionItems(optionItems);
      // 랜더링이 발생함.
      setSelectedOptionItems({...optionItems});
    }
  };

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~