API 발급하기

0. TMDB 가입
1. 프로필-설정-API
2. API 키 요청(click here)-Developer-동의
3. 내용 입력 후 제출

API 사용하기

1. API 탭-API키 복사
2. API 문서에서 사용할 API의 종류 선택
3. Try it out-API키 붙여넣기
4. 하단 링크로 접속
5. 필요한 key값 사용

results: [
  {
  adult: false,
  backdrop_path: "/dKqa850uvbNSCaQCV4Im1XlzEtQ.jpg",
  genre_ids: [
  9648,
  53,
  35
  ],
  id: 661374,
  original_language: "en",
  original_title: "Glass Onion: A Knives Out Mystery",
  overview: "World-famous detective Benoit Blanc heads to Greece to peel back the layers of a mystery surrounding a tech billionaire and his eclectic crew of friends.",
  popularity: 6664.718,
  poster_path: "/vDGr1YdrlfbU9wxTOdpf3zChmv9.jpg",
  release_date: "2022-11-23",
  title: "Glass Onion: A Knives Out Mystery",
  video: false,
  vote_average: 7.1,
  vote_count: 1966
  },
  .
  .
  .
]

스와이퍼에 현재 상영작을 보여줄 용도이므로 Movies 탭에서 Get Now Playing을 선택했다. 이 중에서 backdrop_path, id, overview, poster_path, title, vote_average만을 가져와 사용할 예정이다.

API 적용하기

const Movies = ({ navigation: { navigate } }) => {
  const [nowPlayings, setNowPlayings] = useState([]);
  const [loading, setLoading] = useState(true);

  const BASE_URL = "https://api.themoviedb.org/3/movie";
  const API_KEY = "(발급받은 API키)";

  const getNowPlayings = async () => {
    const { results } = await fetch(
      `${BASE_URL}/now_playing?api_key=${API_KEY}&language=ko&page=1`
    ).then((res) => res.json());

    setNowPlayings(results);
    setLoading(false);
  };

  useEffect(() => {
    getNowPlayings();
  }, []);

  // 데이터 로딩	
  if (loading) {
    return (
      <Loader>
        <ActivityIndicator />
      </Loader>
    );
  }
	
  // 데이터 로딩이 끝나면 실행  
  return (
    <ScrollView>
      <Container>
        <Swiper height="100%" showsPagination={false} autoplay={true} loop>
          {nowPlayings.map((movie) => (
            <SwiperMovie>
              <SwiperScreenShot
                source={{
                  uri: getImgPath(movie.backdrop_path),
                }}
              />
              <LinearGradient
                style={StyleSheet.absoluteFill}
                colors={["transparent", "rgba(0,0,0,0.2)", "black"]}
              />
              <SwiperMovieExplanation style={StyleSheet.absoluteFill}>
                <SwiperPoster
                  source={{
                    uri: getImgPath(movie.poster_path),
                  }}
                />
                <SwiperMovieInfo>
                  <SwiperMovieTitle>{movie.title}</SwiperMovieTitle>
                  <SwiperMovieRating>
                    <FontAwesome name="star" size={16} color="#ffd900" />
                    {movie.vote_average}/10.0
                  </SwiperMovieRating>
                  <SwiperMovieDesc numberOfLines={4}>
                    {movie.overview}
                  </SwiperMovieDesc>
                </SwiperMovieInfo>
              </SwiperMovieExplanation>
            </SwiperMovie>
          ))}
        </Swiper>
      </Container>
      .
      .
      .
  	</ScrollView>

1. 위에서 접속했던 링크를 BASE_URL과 API_KEY로 활용
2. useEffect로 렌더링시 데이터 조회
3. 서버 통신 결과를 바탕으로 데이터 화면에 렌더링 하기

이미지 가져오기

API의 이미지를 사용할 때는 key값 이외에도 베이직 경로가 필요하다. 이 역시 공식문서에서 확인이 가능하다. 해당 경로에서 마지막 슬래시까지가 베이직 경로에 해당한다.

export const getImgPath = (path) => {
  return `https://image.tmdb.org/t/p/w500/${path}`;
};

Movies 페이지에서도 바로 사용할 수 있지만 간결한 코드를 위해 util.js에서 경로를 export 하는 방식으로 사용했다.