npx create-react-app [ํด๋๋ช
]
npm install -g yarn
yarn add axios
yarn add @fortawesome/fontawesome-free
yarn start
๐index.js
- api๋ฅผ ํธ์ถํ๋ youtubeApi.js์์ ๋ฐ์์จ ํจ์์ axios create๋ฅผ ๋ฃ์ด์ค
- axios create (๊ธฐ๋ณธ url, .env key๊ฐ )
๐App.jsx
- ์ํ์ ๋ฐ์ดํธ๋ฅผ ์ํ state๋ฅผ ๊ด๋ฆฌํ๋ ์ต์์ ์ปดํฌ๋ํธ
const inputController = useCallback(
(query) => {
setLoading(true);
setSelect(null);
youtube
.inputController(query) //
.then((videos) => {
setVideo(videos);
setLoading(false);
});
},
[youtube]
);
useCallback ํจ์๋ฅผ ์ฌ์ฉํ ์ด์ ? inputController๋ฅผ ์คํํ๋ inputForm.jsx์ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ๋ฐฉ์งํ๊ธฐ ์ํด memo๋ฅผ ์จ์คฌ๋๋ฐ, ๊ทธ ์์ ์ปดํฌ๋ํธ์ธ App์์ ๋ฆฌ๋ ๋๊ฐ ๋น๋ฒํ๊ฒ ์ผ์ด๋๊ธฐ ๋๋ฌธ์ useCallback์ ์ฌ์ฉํด์ ํจ์๋ฅผ ์ ์ฅํด์ ํ์ํ ๋๋ง ๋ฆฌ๋ ๋๋ง์ด ์ผ์ด๋๊ฒ ํ๊ธฐ์ํจ.
setLoading(true) -> ๋ก๋ฉ์คํผ๋ ํ์ฑํ. ๊ฒ์๊ฐ์ด ์ ๋ ฅ๋๊ณ ์์ง ํด๋น ๋น๋์ค๊ฐ ๋ค ๋ก๋ฉ๋์ง ์์์ ๋ ๋ก๋ฉ์คํผ๋๋ฅผ ํ์ฑํ ํด์ค๋ค์ ๋ค์ false๊ฐ์ผ๋ก ๋ณ๊ฒฝํด์ ๋นํ์ฑํ ํด์ค
useEffect(() => {
youtube.mostPopular().then((videos) => {
setVideo(videos);
});
}, [youtube]);
useEffect ํจ์๋ฅผ ์ฌ์ฉํ ์ด์ ? ์ฒซ ํ๋ฉด์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ํจ์์ด๊ธฐ ๋๋ฌธ์ mount๋๋ฉด ์คํ๋์ผ ํ๊ธฐ ๋๋ฌธ.
๐.env
REACT_APP_YOUTUBE_API_KEY=[๋ฐ๊ธ๋ฐ์ ํค]
ํค๊ฐ์ด ๋ ธ์ถ๋๋ฉด ์ ๋ณด๊ฐ ๋ ธ์ถ๋ ์ํ์ด ์์ผ๋ ํค๊ฐ์ .envํ์ผ์ ๊ผญ REACTAPP๋ฅผ ์จ์ ์ ๋ ฅํด์ค๋ค์(๋ฆฌ์กํธ๊ฐ ์ ํ ๋ฒ์น) ํด๋น ํ์ผ์ gitignore์ ์ถ๊ฐ.
๐youtubeApi.js
class Youtube {
constructor(httpClient) {
this.youtube = httpClient;
}
async mostPopular() {
const response = await this.youtube.get("videos", {
params: {
part: "snippet",
chart: "mostPopular",
maxResults: 25,
},
});
return response.data.items;
}
๋น๋๊ธฐ ์์ ์ ์์๋๋ก ์ฒ๋ฆฌํด์ฃผ๊ธฐ ์ํด async, await์ ์ฌ์ฉํ๋ค. ๋ฐ์์จ httpClient(=axios create์ ๋ณด)๋ฅผ this.youtube์ ํ ๋นํด์ค๋ค.