리액트 시작하기

정리하면 useEffect에서 API 통신을 하는 이유와 작성 순서는 아래와 같습니다.

useEffect는 콜백 함수를 async로 만들 수 없습니다.
그래서 useEffect 안에서 새로운 비동기 함수를 만듭니다.
비동기 함수 안에서 데이터를 가져와 변수에 저장합니다.
만든 함수를 실행합니다.

예시:

useEffect(() => {
const fetchMovieData = async () => {
try {
const data = await getNowPlaying();
console.log(data);
} catch (error) {
console.error(error);
}
};

fetchMovieData();
}, []);


핵심 정리
useEffect를 사용해서 컴포넌트가 렌더링된 후 API를 호출한다.
useEffect의 콜백 함수는 async로 작성하지 않는다.
useEffect 내부에 새로운 비동기 함수를 만든다.
await로 데이터를 받아 변수에 저장한다.
마지막에 비동기 함수를 실행한다.
오류 처리를 위해 try...catch를 사용하는 것이 좋다.

조건문과 비슷하게 코드나 함수에 오류나 문제점이 발생했을때 핸들링 처리 가능함
if문과 차이점은 if문은 무조건 조건을 작성해야되지만 try는 조건없이 문제점을 잡아낼수 있음.

import { useEffect } from "react";

useEffect(() => {
const movieData = async () => {
const nowPlayingData = await getNowPlaying();
console.log(nowPlayingData);
};

movieData();
}, []);


만약 데이터를 state에 저장(전역변수로 사용가능하게 됨)

const [movies, setMovies] = useState([]);

useEffect(() => {
const movieData = async () => {
const nowPlayingData = await getNowPlaying();
setMovies(nowPlayingData.results);
};

movieData();
}, []);


더 잛게 표현하는 소스

방법 1. 즉시 실행 함수(IIFE) 사용 (가장 많이 사용)
useEffect(() => {
(async () => {
const data = await getNowPlaying();
console.log(data);
})();
}, []);
방법 2. then() 사용 (더 짧음)
useEffect(() => {
getNowPlaying().then(data => console.log(data));
}, []);

또는 중괄호도 생략하면:

useEffect(() => {
getNowPlaying().then(console.log);
}, []);
어떤 방법이 좋을까요?
async/await: API를 여러 개 호출하거나 로직이 길어질 때 가독성이 좋습니다.
then(): 한 번만 호출하고 결과만 사용할 때 가장 간결합니다.

React 프로젝트에서는 보통 첫 번째(IIFE + async/await) 방식을 가장 많이 사용합니다. 이후에 try...catch를 추가하거나 여러 API를 순차적으로 호출하기도 편하기 때문입니다.

try...catch를 추가하면 API 호출 중 오류가 발생했을 때 처리할 수 있습니다.

가장 많이 사용하는 형태는 다음과 같습니다.

useEffect(() => {
(async () => {
try {
const data = await getNowPlaying();
console.log(data);
} catch (error) {
console.error(error);
}
})();
}, []);

또는 에러 메시지만 출력하려면

useEffect(() => {
(async () => {
try {
const data = await getNowPlaying();
console.log(data);
} catch (error) {
console.error("영화 정보를 가져오지 못했습니다.", error);
}
})();
}, []);
여러 API를 호출할 때도 동일하게 사용할 수 있습니다.
useEffect(() => {
(async () => {
try {
const nowPlaying = await getNowPlaying();
const popular = await getPopular();

console.log(nowPlaying);
console.log(popular);
} catch (error) {
console.error(error);
}
})();
}, []);

이 패턴은 React에서 API를 호출할 때 가장 흔히 사용하는 형태입니다.

데이터를 state에 저장(전역변수로 사용가능하게 됨)

const [movies, setMovies] = useState([]);

useEffect(() => {
const movieData = async () => {
const nowPlayingData = await getNowPlaying();
setMovies(nowPlayingData.results);
};

movieData();
}, []);


React useEffect에서는 보통 이렇게 작성합니다.

useEffect(() => {
const fetchMovies = async () => {
try {
const [nowPlaying, popular, topRated] = await Promise.all([
getNowPlayingMovies(),
getPopularMovies(),
getTopRatedMovies(),
]);

console.log(nowPlaying);
console.log(popular);
console.log(topRated);

} catch (error) {
console.error(error);
}
};

fetchMovies();
}, []);
정리
Promise.all() → 여러 비동기 작업을 동시에 실행
await → 모든 Promise가 끝날 때까지 대기
배열 구조분해 → 각각의 결과를 변수로 저장
const [A, B, C] = await Promise.all([promise1, promise2, promise3]);

결과:

A → promise1 결과
B → promise2 결과
C → promise3 결과

영화 앱처럼 현재 상영작 / 인기 영화 / 평점 높은 영화처럼 서로 독립적인 데이터를 가져올 때 가장 적합한 패턴입니다.