TodoList를 작성하고 이제 화면으로 불러오는 코드를 작성 중이다.
그리고 난 멘붕이 왔다.
todo를 불러오는 axios 요청을 커스텀 훅으로 만들고 해당 컴포넌트(TodoTitle 컴포넌트)에서 커스텀 훅을 불러와서 사용하려고 했다.
근데 TodoTitle 컴포넌트에서 커스텀 훅을 사용해 todo 데이터를 불러오면 Promise pending(fulfilled)이 콘솔에 찍힌다.
커스텀 혹에서는 콘솔에 데이터가 잘 찍히는데, 이게 무슨 일이람. 왜 이런 일이 일어난 건지도 모르겠다. :)
일단 커스텀 훅으로 분리하지 않고 TodoTitle UI 컴포넌트 내에 axios 요청을 작성했다. 리팩토링할 때 비동기 공부 더해서 왜 그런 건지 알아내야겠다.
그리고 실시간으로 목록 업데이트하기 구현하다가 콘솔 과부하 걸렸다.
✨ 아 이거 해결했다.
처음에 axios로 데이터를 받아오면서 이미 setDatas(..) 함수로 데이터를 업데이트시켜줬는데, useEffect안에 또 넣어서 오류난 것 같다. 에러 메시지가 useEffect안에서 set업데이트 함수를 실행시키고 있다고 해서 봤더니
const [datas, setDatas] = useState([]);
const getTodo = async () => {
try {
await axios
.get('http://localhost:8080/todos', {
headers: {
Authorization: token,
},
})
.then((result) => {
setDatas(result.data.data); // 👈🏻 데이터를 업데이트 해주고 있음
});
} catch (error) {
console.log(error);
}
};
useEffect(() => {
setDatas(getTodo()); // 여기가 문제였음 💩
}, [datas]);
useEffect 의존성 배열에 datas를 넣어주면 data값이 계속 바뀌고 effect가 일어나면서 setDatas안에 함수가 계속 실행이 되어서. 아마 에러가 난 것 같다. 해결 방법은 생각보다 간단했다.
useEffect(() => {
getTodo();
}, [datas]);이미 getTodo함수에서 axios 요청 후 받아온 데이터를 setDatas안에 넣어 datas를 업데이트시키고 있기 때문에 그냥 useEffect안에서 getTodo함수를 실행만 시켜주면 되는 문제였다.
이제 투두를 추가하면 실시간 반영이 되는데 이게 어떻게 동작하는 건지 이해가 잘 안 간다. form에서 새로운 투두를 추가하더라도 getTodo함수를 다시 실행시키는 게 아니면 setDatas로 datas가 업데이트되는 것도 아닌데, form에서 새 투두를 추가하면 한 번 더 업데이트가 일어나는 이유가 뭘까?🤔
구글 익스텐션으로 리 렌더링이 일어나는 컴포넌트를 하이라이팅 하도록 체크했더니, todo 타이틀 박스가 첫 렌더링 되자마자 계속 하이라이팅 되어있음
무한 렌더링 굴레에 빠진 것일까나 진짜 왜 이런 거지?🤔💩
✨ 아 나 알겠다.
처음 useState로 datas의 초기 값을 [] 빈 배열로 설정해줬다.
그다음 처음 화면이 렌더링 되면서 getTodo함수가 실행되고 setDatas함수로 datas값을 업데이트한다. 의존성 배열에 들어있는 datas가 업데이트되니까 다시 getTodo함수가 실행되고 또 setDatas함수로 datas함수를 업데이트하는 무한 굴레∞에 빠지게 된 것이다!
팀 프로젝트할 때도 몰라서 해결 못했던 건데 궁금증 해결했다!
그러면 실시간 업데이트를 어떻게 하는 게 좋을까 하고 찾아보니 React Query를 써보면 좋을 것 같더라! 이 부분 나중에 리팩토링 하면서 수정해 볼 예정이다.
나중에 투두 내용 업데이트 기능도 추가할 건데, 업데이트된 내용이 또 바로 반영될 수 있도록 만드는 기능에서도 유용하게 쓰일 것 같다.
이제 구현해볼 기능은 todo 타이틀을 클릭하면 해당 투두의 제목과 내용을 보여주도록 하는 기능을 구현할 예정이다. 여기서 어떻게 하면 좋을지 생각을 해봤는데, useReducer함수랑 context api를 사용하면 되지 않을까 싶은 생각이 든다. 어떻게 사용할지는 다음 글에 적어봐야지.
