영화 나열을 위한 Row 컴포넌트 생성하기

1. Row 컴포넌트 생성 

import React from 'react'

const Row = () => {
  return (
    <div>
      
    </div>
  )
}

export default Row

 

 

2. APP 에 ROW 가져오기 

app.js

function App() {
  return (
    <Container>
      <Nav />
      <Banner />
      <Category />
      <Row title="Trending Now" id="TN" fetchUrl={requests.fetchTrending} />
      <Row title="Top Rated" id="TR" fetchUrl={requests.fetchTopRated} />
      <Row title="Action Movies" id="AM" fetchUrl={requests.fetchActionMovies} />
      <Row title="Comedy Movies" id="CM" fetchUrl={requests.fetchcomedyMovies} />
    </Container>
  );
}

 

3. 내려준 Props 가져오기 

Row.js

import React from 'react'

const Row = ( title, id , fetchUrl ) => {
  return (
    <div>
      Row
    </div>
  )
}

export default Row

 

4. 영화 정보 가져오기

import axios from '../api/axios';
import React, { useCallback, useEffect, useState } from 'react';

const Row = ({ title, id, fetchUrl }) => {
  const [Movies, setMovies] = useState([]); // 초기 상태를 빈 배열로 설정

  const fetchMovieData = useCallback(async () => {
    try {
      const response = await axios.get(fetchUrl);
      console.log('response', response);
      setMovies(response.data.results);
    } catch (error) {
      console.error('Failed to fetch movies:', error);
    }
  }, [fetchUrl]);

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

 

5. UI 디자인 

return (
    <div>
      <h2>{title}</h2>
      <div className='slider'>
        <div className='slider__arrow-left'>
          <span className='arrow'>
            {"<"}
          </span>
        </div>
        <div id={id} className="row__posters">
          {Movies && Movies.map(movie => (
            <img
              key={movie.id}
              className="row__poster"
              src={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
              alt={movie.name} // alt 속성 추가
            />
          ))}
        </div>
        <div className='slider__arrow-right'>
          <span calssName='arrow'>
            {">"}
          </span>
        </div>
      </div>
    </div>
  );
};

export default Row;