react-hook 사용하여 프로젝트를 진행 중, 잘 사용하던 useEffect로 인해 무한루프에 빠졌습니다.
useEffect(() => {
try {
const something = {api 데이터 가져오는 코드}; //something은 object
if (조건 true) {
setOthers(others);
setSomething(something);
}
} catch (error) {
...
}
});
대략 이런 코드였는데 구글링을 열심히 해보니 something이 object 타입이라 생긴 문제로 판단했습니다.
c언어에서 주소값이 다른 것처럼.... object는 같은 빈 object여도 {} 와 {} 이 다릅니다.
그래서 setSomething으로 something을 계속 업데이트해서 생긴 문제
여러 해결방법이 있겠지만 , 제가 선택한 해결방법은
useEffect(() => {
try {
const something = {api 데이터 가져오는 코드}; //something은 object
if (조건 true) {
setOthers(others);
setSomething(something);
}
} catch (error) {
...
}
}, [others]);
이렇게 dependency에 계속 관찰할 것을 넣어주었습니다. dependency에 변수를 넣어주면, 그 변수가 바뀔 때만 useEffect가 실행됩니다.
우선은 이렇게 해결해놓았고, object deep copy를 찾아보고 있습니다~
'Front-end > ReactJS' 카테고리의 다른 글
커스텀 드롭다운 메뉴 만들기 (0) | 2021.01.09 |
---|---|
useState 사용 시 배열 아이템 업데이트 방법 (0) | 2021.01.06 |
React로 사고하기 ! (0) | 2020.12.21 |
댓글