TIL : useEffect 복습 / 의존성 배열

 

https://www.youtube.com/watch?v=kyodvzc5GHU
우선 영상을 다시 봤다. 쉽게 설명해주셔서 이해가 잘 되지만 막상 코드에 적용할 때  의존성 배열에 어떤 걸 넣어야 할지 헷갈린다😂

 

 const { data } = useGetTags();
 
  useEffect(() => {
    if (data) {
      console.log('태그들 불러와짐');
      console.log('tag data:', data.data);
      setTagName(data.data);
      setClickedList(Array(data.data.length).fill(false));
    }
  }, [data]);

 

🌼 이 경우에는 의존성 배열에 왜 꼭 data를 써야 하는지 궁금했다. 그냥 [ ]만 써서 초기 렌더링 때만 하면 안 되는 것인가??

 

👉 이 경우 서버에서 데이터가 늦게 오는 경우라면 data가 null 또는 undefined 일 수도 있다. 

 

여기서는 태그 데이터를 로드한 후에 해당 데이터를 상태로 설정하고 data의 길이에 따라 다른 상태(clickedList)를 설정하는 작업을 하고 있다.

 

비동기 데이터 요청에서는 데이터가 언제 도착할지 정확히 예측하기 어렵다. 따라서 useEffect를 적절하게 설정하여 데이터가 도착했을 때 바로 처리할 수 있도록 준비하는 것이 중요

 

👉 상태 동기화

data가 변경될 때마다 setTagName과 setClickedList를 호출하여 컴포넌트의 상태를 최신 data와 동기화한다. 이는 사용자가 태그 데이터를 볼 때 항상 최신 데이터를 반영하도록 보장

---

🌼 태그 삭제 요청

 const { mutate: DeleteTagMutate } = useDeleteTag();
 
  useEffect(() => {
    const tagIdToDelete = 36;
    DeleteTagMutate(tagIdToDelete);
  }, [DeleteTagMutate]);

 

👉 함수 변경 감지

useEffect는 의존성 배열의 요소가 변경될 때마다 실행됩니다. DeleteTagMutate 함수는 서버에 데이터 변경 요청을 보내는 중요한 함수이므로, 이 함수가 변경될 때마다 useEffect를 통해 새로운 삭제 요청을 보낼 수 있다.

 

👉 DeleteTagMutate 함수는 비동기로 동작할 수 있으므로, 이 함수가 완료될 때까지 기다리지 않고 다음 코드가 실행될 수 있다. 필요에 따라 비동기 작업을 완료한 후에 상태를 업데이트하거나 다음 작업을 수행하는 것이 중요

---

🐥 추가 공부

- 다른 코드에서도 useEffect 쓸 때 의존성 배열 잘 넣어보기 - useEffect 다른 부분도 정리해서 글 작성