[TIL] 220128
16240 단어 JavaScriptReactTILJavaScript
📝 오늘 한 것
- PRACTICE
📚 배운 것
linkedList는 gitlab 커밋
1. PRACTICE
3) movie app
(1) useEffect() / API 호출
방법 1: promise / then 사용
useEffect(function () {
fetch(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
)
.then((response) => response.json())
.then((info) => {
setMovies(info.data.movies);
setLoading(false);
});
}, []);
방법 2: async / await 사용
const getMovies = async () => {
const json = await (
await fetch(
"https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year"
)
).json();
setMovies(json.data.movies);
setLoading(false);
};
useEffect(() => getMovies(), []);
(2) 컴포넌트 렌더링
이를 바탕으로 렌더링할 App 컴포넌트를 작성했다.
return (
<div>
<h1>Movies {loading ? null : `(${movies.length})`}</h1>
{loading ? (
<strong>로딩 중...</strong>
) : (
<div>
{movies.map((movie) => {
return (
<div key={movie.id}>
<a href={movie.url} target="_blank" rel="noreferrer">
<h2>{movie.title}</h2>
</a>
<img src={movie.medium_cover_image} alt={movie.title} />
{movie.genres.map((genre) => (
<li key={genre}>{genre} </li>
))}
<p>{movie.summary}</p>
</div>
);
})}
</div>
)}
</div>
);
알아보기 쉽게 정리하기 위해 js 파일을 하나 더 만들어서 컴포넌트로 만든 후 이를 export & import 했다.
import Movie from "./Movie";
import PropTypes from "prop-types";
Movie.propTypes = {
title: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
img: PropTypes.string.isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
summary: PropTypes.string.isRequired,
};
// Movie.js
const Movie = ({ title, url, img, genres, summary }) => {
return (
<div>
<a href={url} target="_blank" rel="noreferrer">
<h2>{title}</h2>
</a>
<img src={img} alt={title} />
{genres.map((genre) => (
<li key={genre}>{genre} </li>
))}
<p>{summary}</p>
</div>
);
};
export default Movie;
✨ 내일 할 것
- movie app
Author And Source
이 문제에 관하여([TIL] 220128), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@leesyong/TIL-220128
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여([TIL] 220128), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leesyong/TIL-220128저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)