$$config title: Movie App keywords: - React - Movie App $$

Movie App 리액트 공부

> React 사용한 공부
> 오픈 API를 사용해 영화(Popular, Top Rated , Upcoming) 리스트 및 검색
--- ### ? app.jsx - 라우터를 사용한 페이지 이동 로직 ```js import Home from "./Pages/Home"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Header from "./Components/Header"; import MovieList from "./Pages/MovieList"; import MovieDetail from "./Pages/MovieDeatil"; function App() { return (

} /> } /> } /> Error Page} /> ); } export default App; ```
### ? Header.jsx(Components) - 상단 컴포넌트 (로고, Popular, Top Rated , Upcoming) - Link 사용하여 각 페이지 이동 - styled-components 사용한 css 적용 ```js import { Link } from "react-router-dom"; import styled from "styled-components"; function Header() { return (

Popular Top Rated Upcoming ); } const imdbImg = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/1024px-IMDB_Logo_2016.svg.png"; const Container = styled.div` margin: 0 2.5rem; padding: 0.5rem 0; align-items: center; display: flex; justify-content: space-between; `; const Cell = styled.div` display: flex; align-items: center; &.left { gap: 3rem; font-size: 1.3rem; cursor: pointer; } `; const Img = styled.img` width: 80px; cursor: pointer; display: block; `; export default Header; ```
### ? Card.jsx(Components) - 스켈레톤 컴포넌트를 사용하여 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트라우터를 사용한 페이지 이동 로직 - 로딩(true)시 스켈레톤 컴포넌트 사용 로딩 끝났을시 페이지가 열린다. - item으로 영화 오픈 api 의 포스터 이미지를 가져온다. - 서브로 개봉 날짜/ 평점 , 내용 0~50자이내로 나온다. - useEffect 로 로딩이 1초 후 false 변경 - list 페이지 로딩을 위한 로직 ```js import { useEffect, useState } from "react"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import styled from "styled-components"; import "react-loading-skeleton/dist/skeleton.css"; import { Link } from "react-router-dom"; function Card({ movie }) { const [loading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { setLoading(false); }, 1000); }, []); return ( {loading ? ( ) : (

{movie.original_title} {movie.release_date} / ⭐ {movie.vote_average} {/* */} {movie.overview.slice(0, 50) + "..."} )} ); } const Container = styled.div``; const Item = styled.div` position: relative; display: inline-block; border-radius: 10px; overflow: hidden; margin: 0.19rem; cursor: pointer; min-width: 200px; height: 300px; z-index: 0; transition: transform 0.2s; border: 1px solid rgb(99, 99, 99); &:hover { transform: scale(1.2); z-index: 1000; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; } `; const Img = styled.img` height: 300px; `; const Overlay = styled.div` position: absolute; bottom: 0; padding: 1rem; padding-top: 0; height: 290px; display: flex; flex-flow: column; width: 100%; justify-content: flex-end; background-image: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1)); opacity: 0; transition: opacity 0.2s; &:hover { opacity: 1; } `; const Title = styled.h4` font-weight: 900; font-size: 1rem; margin-bottom: 0.4rem; `; const SubTitle = styled.h5` display: flex; align-items: center; gap: 6px; font-size: 0.75rem; margin-bottom: 0.25rem; `; const Description = styled.p` font-style: italic; font-size: 0.75rem; margin-bottom: 0.25rem; width: 85%; `; export default Card; ```
### ? PosterItem.jsx(Components) - 스켈레톤 컴포넌트를 사용하여 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트라우터를 사용한 페이지 이동 로직 - 로딩(true)시 스켈레톤 컴포넌트 사용 로딩 끝났을시 페이지가 열린다. - item으로 영화 오픈 api 의 포스터 이미지를 가져온다. - 서브로 개봉 날짜/ 평점 , 내용 0~50자이내로 나온다. - useEffect 로 로딩이 1초 후 false 변경 - onClick 을 넣어 movie 페이지 이동 ```js import styled from "styled-components"; import { useNavigate } from "react-router-dom"; function PosterItem({ movie }) { const navigate = useNavigate(); const onClickPoster = () => { navigate("/movie/" + movie.id) } return (

{movie.original_title} {movie.release_date} / ⭐ {movie.vote_average} {/* */} {movie.overview.slice(0, 50) + "..."} ); } const Container = styled.div` position: relative; `; const ImgBox = styled.div` /* max-height: 700px; */ height: calc(100vh - 80px); img { display: block; } `; const Overlay = styled.div` padding: 80px 40px; position: absolute; bottom: 0; /* transform: translateY(-50%); */ width: 100%; text-align: left; background-image: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1)); `; const Title = styled.h5` font-size: 3.7rem; `; const SubTitle = styled.p` font-size: 1.2rem; display: flex; align-items: center; gap: 12px; margin: 20px 0; `; const Description = styled.p` font-style: italic; width: 70%; `; export default PosterItem; ```
### ? SearchBox.jsx - 검색 박스 컴포넌트 로직 ```js import styled from "styled-components"; import { BiSearchAlt } from "react-icons/bi" function SearchBox({keyword,onChangeKeyword}) { return ( ); } const Container = styled.div` width: 100%; height: 0; margin-top: 10px; `; const Wrapper = styled.div` position: relative; display: flex; width: 100%; gap: 8px; align-items: center; background-color: white; border-radius: 20px; overflow: hidden; max-width: 60%; margin: 0 auto; box-shadow: 0 2px 4px rgba(250, 250, 250, 0.24); `; const Input = styled.input` width: 100%; display: block; padding: 8px 20px; padding-left: 38px; border: 0; outline: 0; `; const ImgBox = styled.div` position: absolute; top: 50%; transform: translateY(-50%); left: 10px; display: flex; align-items: center; svg { fill: black; } `; export default SearchBox; ```
### ? Home.jsx(Pages) - 메인홈페이지를 구현한 로직 - Carousel 라이브러리를 이용한 슬라이드 구현 (자동재생, 루프 등 선언 - 메인홈페이지는 무비포스터를 보여주기 때문에 (PosterItem 컴포넌트 사용) , 최근 순위 영화를 보여준다. - fetch 함수를 사용하여 API를 호출합니다. URL은 TMDB의 인기 영화 목록 API 엔드포인트입니다. config.API_KEY는 외부에서 가져온 API 키로, 해당 키를 통해 인증을 수행합니다. - .then() 메서드를 사용하여 API 응답을 처리 , result로 영화 데이터 출력 ```js import { Carousel } from "react-responsive-carousel"; import styled from "styled-components"; import "react-responsive-carousel/lib/styles/carousel.min.css"; import { movies } from "../../movie_data"; import { useEffect, useState } from "react"; import { config } from "../constant"; import PosterItem from "../Components/Posteritem"; function Home() { const [popularMovies, setPopularMovies] = useState([]); useEffect(() => { fetch( "https://api.themoviedb.org/3/movie/popular?language=ko-KR&api_key=" + config.API_KEY ) .then((res) => res.json()) .then((data) => { // console.log(data) setPopularMovies(data.results); }); }, []); return ( {popularMovies.map((movie) => ( ))} ); } const Container = styled.div``; const MoviePoster = styled.div` display: flex; align-items: center; `; export default Home; ```
### ? MovieList.jsx(Pages) - useEffect 훅을 사용하여 URL 파라미터 값이 변경될 때마다 해당하는 타입의 영화 목록을 가져옵니다. - Card 컴포넌트를 사용하여 각 영화 카드를 표시 ```js iimport { useEffect, useState } from "react"; import { useParams } from "react-router"; import styled from "styled-components"; import { config } from "../constant"; import Card from "../Components/Card"; import SearchBox from "../Components/SearchBox"; function MovieList() { // 상세페이지 관련 const [movies, setMovies] = useState([]); const params = useParams(); // 검색 관련 const [keyword, setKeyword] = useState(""); const onChangeKeyword = (e) => { setKeyword(e.target.value); }; useEffect(() => { fetch( `https://api.themoviedb.org/3/movie/${ params.type ? params.type : "popular" }?language=ko-KR&api_key=` + config.API_KEY ) .then((res) => res.json()) .then((data) => { // console.log(data) setMovies(data.results); setKeyword(""); }); }, [params.type]); return ( {movies .filter( (movie) => movie.original_title .toLowerCase() .includes(keyword.toLowerCase()) || movie.title.toLowerCase().includes(keyword.toLowerCase()) //검색어가 영화의 원래 제목에 포함되는 경우를 확인합니다. ) //toLowerCase()를 사용하여 대소문자를 무시하고 검색을 수행합니다. .map((movie) => ( ))} //map 함수를 사용하여 필터링된 결과의 각 영화에 대해 Card 컴포넌트를 렌더링 ); } const Container = styled.div` padding: 0 3rem 3rem 3rem; `; const Title = styled.h2` font-size: 1.75rem; margin: 2.5rem; `; const Group = styled.div` display: flex; flex-flow: row wrap; width: 100%; justify-content: center; `; export default MovieList; ```
### ? MovieDetail.jsx(Pages) - 메인으로 가장 큼 포스터 이미지 구현, 왼쪽 아래는 작은 이미지 구현 - 작은 이미지 옆에는 제목, 개봉일, 평점 , 장르 , 소개글 구현 ```js import { useEffect, useState } from "react"; import { useParams } from "react-router"; import styled from "styled-components"; import { config } from "../constant"; function MovieDetail() { const param = useParams(); const [movie, setMovie] = useState(); useEffect(() => { fetch( `https://api.themoviedb.org/3/movie/${param.id}?language=ko-KR&api_key=` + config.API_KEY ) .then((res) => res.json()) .then((data) => { setMovie(data); //fetch 함수를 사용하여 API를 호출합니다. URL에 param.id를 넣어서 해당 영화 ID에 해당하는 영화 정보를 가져옵니다. API 응답 데이터를 JSON으로 변환하고, setMovie 함수를 사용하여 상태를 업데이트합니다. }); }, [param.id]); if (!movie) { return <> //영화데이터가 없을때 표시를 하지않는다 } return ( 포스터 사진

{movie.original_title} {movie.vote_average} ⭐ / {movie.runtime + " mins"} {movie.genres.map((genre) => ( {genre.name} ))} 소개글(Synopsis) {movie.overview} ); } const Container = styled.div` position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; `; const Intro = styled.div` width: 80%; `; const Content = styled.div` position: relative; display: flex; width: 75%; align-items: center; bottom: 225px; `; const LeftSide = styled.div` margin-right: 30px; `; const RightSide = styled.div``; const ImgBox = styled.div` &.backdrop { img { width: 100%; height: 500px; object-fit: cover; object-position: 0 35%; } } &.poster { img { width: 300px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.86) 0px 22px 40px 6px; } } `; const Title = styled.h5` font-size: 3rem; margin-bottom: 1rem; `; const TagLine = styled.p``; const Text = styled.p` display: flex; align-items: center; gap: 0.6rem; span { display: flex; align-items: center; gap: 0.2rem; } &:not(:first-child) { margin-bottom: 0.5rem; } `; const GenreGroup = styled.div` display: flex; gap: 1rem; margin: 1.25rem 0; `; const GenreItem = styled.p` padding: 0.5rem; border: 2px solid white; border-radius: 20px; `; const RightSideTop = styled.div``; const RightSideBottom = styled.div` margin: 2.5rem 0; `; const BottomTitle = styled.h5` font-size: 1.6rem; margin-bottom: 1.5rem; `; const BottomText = styled.p``; export default MovieDetail; ```