useState에 같은 값이 들어와도 리렌더링하기
오늘 차트를 작성하다가 데이터가 안들어올때, interval로 데이터를 찍어주고 싶었는데, 작동을 하지 않아서 서칭으로 해결했고, 기록을 남겨두려고 한다.
useState
를 사용했을 때 참조값일 경우 같은 주소를 바라보면 값이 변했다는 인식을 못하고 리 렌더링을 하지 않는다는 것이다.
처음에는 아래와 같이 작성했다.
const [data, setData] = useState(initData);
const allTagZero = Object.values(data).every(el => el === 0);
useEffect(() => {
// ...MyCode
setData(data);
if (allTagZero) {
const timer = setInterval(() => {
setData({ data });
}, 1000);
return () => clearInterval(timer);
}
}, [categoryStatus]);
해결
해결 방법은 같은 다른 값이라는 것을 react에게 알려주기 위해 구조 분해를 사용했다.
const [data, setData] = useState(initData);
const allTagZero = Object.values(data).every(el => el === 0);
useEffect(() => {
// ...MyCode
setData(data);
if (allTagZero) {
const timer = setInterval(() => {
// ! 바뀐부분
setData({ ...data });
}, 1000);
return () => clearInterval(timer);
}
}, [categoryStatus]);
이제 다른 값으로 제대로 인식한다.
Author And Source
이 문제에 관하여(useState에 같은 값이 들어와도 리렌더링하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pest95/useState에-같은-값이-들어와도-리렌더링하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)