API로 가져온 데이터를 상태에 저장해야 하는 경우(useEffect)

//youtubeApi.tsx

import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://youtube.googleapis.com/youtube/v3",
});

export const petsVideos = async () => {
  try {
    const response = await apiClient.get("videos", {
      params: {
        part: "snippet",
        chart: "mostPopular",
        maxResults: "16",
        regionCode: "KR",
        videoCategoryId: "15",
        key: import.meta.env.VITE_REACT_APP_API_KEY,
      },
    });
    console.log("response.data.items", response);
    return response.data.items;
  } catch (error) {
    console.log(error);
  }
};

  //thumbs.tsx
  
  const [videos, setVideos] = useState<Video[]>([]);
  console.log("videos", videos);

  useEffect(() => {
    const fetchVideos = async () => {
      const response = await petsVideos();
      setVideos(response);
    };
    fetchVideos();
  }, []); // 의존성 배열이 비어 있어 컴포넌트 최초 렌더링 시 1회 호출

 

🌼 petsVideos();를 바로 호출하지 않고 useEffect 안에서 fetchVideos라는 함수를 정의한 뒤 호출하는 이유는??

API로 가져온 데이터를 React 컴포넌트의 상태에 저장해야 하는 경우, useEffect 안에서 상태를 업데이트하는 것이 일반적이다. 

 

React 컴포넌트 렌더링 타이밍 제어

React 컴포넌트의 초기 렌더링이 이루어진 후에 API 호출을 수행해야 한다.

• useEffect는 컴포넌트가 렌더링 된 이후에 실행되므로, 초기 렌더링과 비동기 작업을 분리할 수 있다.
• 만약 petsVideos();를 컴포넌트 바깥에서 바로 호출하면, 컴포넌트가 렌더링 되기 전에 API 호출이 실행될 수 있다. 이는 React의 렌더링 흐름과 충돌하거나 원치 않는 타이밍 문제를 초래할 수 있다.

 

🌼 정리

useEffect를 사용하면 React 컴포넌트의 생명주기에 맞춰 비동기 작업을 처리할 수 있고, 상태 업데이트와 재렌더링 흐름을 자연스럽게 통합할 수 있다. 즉, 컴포넌트 렌더링 흐름을 깨지 않고 데이터를 가져오는 표준적인 방법. petsVideos();를 바로 호출하는 것은 이런 React의 상태 관리 및 흐름과 동떨어져 효율적이지 않다.

 

순서를 정리해 보면,

 

• 컴포넌트 렌더링 → useEffect 실행
• API 요청 → 응답 데이터를 상태에 저장 (setState)
• 상태 업데이트 → 컴포넌트 재렌더링 → 데이터가 화면에 반영