[React] setstate 사용 시 re-rendering 안되는 오류

개요

React에서 state값을 변경해야할 때, setstate를 사용해서 변경할 수 있다. state값이 변경되면 자동적으로 rendering이 이루어지는데, 이것은 리엑트의 부분 렌더링이라는 기법이다. 변한 state을 사용하는 컴포넌트와 하위 컴포넌트들만 rendering을 해서 효율을 높이는 방식이다. setstate는 비동기적으로 동작하기 때문에 사용후 곧바로 콘솔을 찍어보면 state값이 변화가 없다고 찍힌다. 이것은 당연한 결과라고 한다.

오류

setstate를 사용했는데 rendering이 작동하지 않았다.

해결

1시간 동안 헤멨는데, 콘솔을 여기저기 다 찍어보니깐, useEffect를 사용했을 때도 값이 변화가 없다고 떴다. 분명히 배열의 값이 변했는데 왜 변화가 없다고 뜰까. 친구찬스를 사용해서 스택오버플로우 주소를 받아냈다. 결국은 JS문제였는데, 배열의 값이 추가되어도 같은 주소를 참조하기 때문에 값이 변화가 없다고 뜬거다. 결국엔 참조된 주소를 바꿔주어야 state값이 바뀌는것을 React가 인지할 수 있다.   

 

...이렇게 점 세게를 찍는 문법을 spread operator라고 부른다.

[...array] 이렇게 사용하면 array를 해체한 후 배열에 넣는다.

결국엔 array원소가 들어가있는 새 배열이 리턴되는 것이다. 핵심은 새로운 주소값을 할당해 주는 것이다. 

 

//오류 코드
setChannels(channelsTmp)
//해결 코드
setChannels({...channelsTmp})

 

Why is useState not triggering re-render?