렌더링지옥. 영원회귀
1
2
3
4
5
6
7
8
9
10
11
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = () => {
axios.get({ url }).then((response) => {
setData(response.data.items);
console.log(data);
});
};
fetchData();
}, [data]);
오늘 새벽에 악몽 속에서 몸부림 치다 깨버렸다. 꿈의 내용은 콘솔 창에 무한히 찍히는 렌더링 데이터를 보고 있는 것. 어제의 상황이 그랬고, 나는 순식간에 api에서 감당하는 하루 트래픽 1000건을 다 쓴 것도 모른 채 뭔지도 모를 에러를 막느라 하루를 써버렸다. 영원회귀란 영원한 렌더링이 아닐까. 무의식중에 그런 생각을 하면서 게보린을 먹고 겨우 다시 잠에 들었다.
위는 내가 쓴 정말 바보같은 코드다. useState에 왜 빈 배열이 있어…? useEffect에 왜 [data]가 들어가…? 나는 useState와 useEffect를 다시 배우고 와야 한다. 이건 일종의 반성문이다…
1
2
3
4
5
6
7
8
9
10
11
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = () => {
axios.get({ url }).then((response) => {
setData(response.data.items);
console.log(data);
});
};
fetchData();
}, []);
고친 코드는 이것이다. null은 왜 null이고 data는 왜 그 자리에 있으면 안 되는지 반성문을 쓰자.
