[TIL] 0611 | React with Redux, Next.js, TypeScript

Teasanยท2022๋…„ 6์›” 11์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
6/36
post-thumbnail

๋ชฉ์ฐจ

  • ์š”์ฒญ์— useEffect ์‚ฌ์šฉํ•˜๊ธฐ
  • ๋‹ค์Œ ๋‹จ๊ณ„๋ฅผ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ ์ค€๋น„ํ•˜๊ธฐ
  • POST ์š”์ฒญ ๋ณด๋‚ด๊ธฐ

โœง ์š”์ฒญ์— useEffect ์‚ฌ์šฉํ•˜๊ธฐ

  • ๋Œ€๋ถ€๋ถ„์˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” ํŠน์ • ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋กœ๋”ฉ๋˜์ž๋งˆ์ž ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค. ๊ฐ€๋ น ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋ฐฉ๋ฌธํ•˜์ž๋งˆ์ž ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ง์ด๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ํ˜„์žฌ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•ด์„œ ๊ฐ€์ ธ์˜ค๊ณ  ์žˆ๊ธฐ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฆ‰์‹œ fetch ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ถ”๊ฐ€์ ์ธ ์ž‘์—…์ด ํ•„์š”ํ•˜๋‹ค.

useEffect ์œผ๋กœ ์ฆ‰์‹œ ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•˜๋Š” ๊ฒƒ์ด ๊ฐ€๋Šฅํ•œ ์ด์œ 

  • useEffect ํ›…์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฆ‰์‹œ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒŒ ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” HTTP ์š”์ฒญ ์ „์†ก์€ ์ผ์ข…์˜ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋กœ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ(state)๋ฅผ ๋ฐ”๊ฟ”๋ฒ„๋ฆด ์ˆ˜ ์žˆ๊ธฐ ๋–„๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด์ „์— ์šฐ๋ฆฌ๊ฐ€ ๋ฐฐ์› ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ์ด๋Ÿฐ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋Š” useEffect์„ ์‚ฌ์šฉํ•œ๋‹ค. ํ•จ์ˆ˜๋กœ ์ง‘์–ด๋„ฃ๋Š” ๊ฒƒ ์—ญ์‹œ ์ƒ๊ด€ ์—†๋‹ค. ํ•จ์ˆ˜ ์ผ๋ถ€๋ถ„์œผ๋กœ ํ˜ธ์ถœํ•˜์ง€๋งŒ ์•Š๋Š”๋‹ค๋ฉด ๋ง์ด๋‹ค. ๋งŒ์•ฝ ๊ทธ๋ ‡๊ฒŒ ํ•œ๋‹ค๋ฉด, ํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋˜๋Š” ์ˆœ๊ฐ„ ์ƒํƒœ(state)์˜ ๊ฐฑ์‹ ์ด ๋ฐœ์ƒํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜๊ฐ€ ์žฌ๋ Œ๋”๋ง-์žฌํ‰๊ฐ€ ๋˜๋ฉด์„œ ๋ฌดํ•œ์œผ๋กœ ํ˜ธ์ถœ๋˜๋Š” ๋ฌดํ•œ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ํ”ผํ•˜๊ธฐ ์œ„ํ•ด์„œ ์šฐ๋ฆฌ๋Š” useEffect๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • useEffect๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋˜๋Š” ์ฃผ๊ธฐ ์•ˆ์—์„œ ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ์žˆ์„ ๋•Œ ์œ ์šฉํ•˜๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žฌ๋ Œ๋”๋ง๋  ๊ฒฝ์šฐ๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅด์ง€๋งŒ ๋ง์ด๋‹ค. ๋”ฐ๋ผ์„œ ์—ฌ๊ธฐ์— useEffect๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ function ์˜ˆ์•ฝ์–ด๋ฅผ ์ด์šฉํ•œ ์ •๊ทœ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด effect ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•œ๋‹ค.

useEffect(() => {
  fetchMoviesHandler();
});
  • ์ด useEffect ํ•จ์ˆ˜ ์•ˆ์—์„œ ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๋™์•ˆ ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•ด์˜ค๋Š” ๋ฐ ์‚ฌ์šฉํ–ˆ๋˜ fetchMoviesHandler ํŠธ๋ฆฌ๊ฑฐ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.

์˜์กด์„ฑ ๋ฐฐ์—ด๋กœ ๋ฌดํ•œ ๋ฃจํ”„๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ

  • ์ด์ œ fetchMoviesHandler ํ•จ์ˆ˜๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํ˜ธ์ถœ๋˜์ง€๋งŒ ๋™์‹œ์— ์ปดํฌ๋„ŒํŠธ ์žฌํ‰๊ฐ€๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ์—๋„ ํ˜ธ์ถœํ•˜๊ฒŒ ๋œ๋‹ค. ์ด ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๊ฐ€ ์•ž์„œ ๊ฑฐ๋ก ํ–ˆ๋˜ ๋ฌดํ•œ ๋ฃจํ”„ ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ปดํฌ๋„ŒํŠธ ์žฌํ‰๊ฐ€๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ˜ธ์ถœํ•˜์ง€ ์•Š๋„๋ก ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•  ๊ฒƒ์ด ์žˆ๋‹ค.
useEffect(() => {
  fetchMoviesHandler();
}, []);
  • useEffect ์˜ ์˜์กด์„ฑ ๋ฐฐ์—ด์„ ์ถ”๊ฐ€ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ์–ธ์ œ effect ํ•จ์ˆ˜๊ฐ€ ๋‹ค์‹œ ์‹คํ–‰๋˜๋Š” ์ง€๋ฅผ ์ •์˜ํ•œ๋‹ค๋Š” ๋œป์ด๋‹ค. ์ฆ‰, ์šฐ๋ฆฌ๊ฐ€ ์ถ”๊ฐ€ํ•œ ์˜์กด์„ฑ ๋ฐฐ์—ด์˜ ๋ชฉ๋ก์ด ๊ฐฑ์‹  ๋˜๊ฑฐ๋‚˜ ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค effect ํ•จ์ˆ˜๊ฐ€ ์žฌ์‹คํ–‰๋˜๋„๋ก ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ํ˜„์žฌ๋Š”, ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์•„๋ฌด ๊ฒƒ๋„ ๋“ค์–ด์žˆ์ง€ ์•Š๋‹ค. ์ด ์ƒํƒœ๋กœ ์ €์žฅํ•œ๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ตœ์ดˆ๋กœ ๋กœ๋”ฉ๋  ๋•Œ๋ฅผ ์ œ์™ธํ•˜๊ณ ๋Š” ์ ˆ๋Œ€ ์žฌ์‹คํ–‰๋˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ, ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด ๋ฐ์ดํ„ฐ๋ฅผ ์ฆ‰์‹œ fetch ํ•ด์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

effect ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์˜์กด์„ฑ์€ ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค

  • ์‚ฌ์‹ค ์ด๋Ÿฐ ์‹์˜ ์‹คํ–‰์€ ์ฉ ๊น”๋”ํ•œ ๋ฐฉ์‹์€ ์•„๋‹ˆ๋‹ค. ๋‹ค๋งŒ ์šฐ๋ฆฌ๊ฐ€ ์—ฌ๊ธฐ์„œ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋Š” ๊ฑด effect ํ•จ์ˆ˜ ๋‚ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์˜์กด์„ฑ์„ ์ด ์˜์กด์„ฑ ๋ฐฐ์—ด์— ํ‘œ์‹œํ•ด๋‘๋Š” ๊ฒŒ ๊ฐ€์žฅ ์ข‹๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์—์„œ๋Š” fetchMoviesHandler๊ฐ€ ๋ฐ”๋กœ ๊ทธ ๋Œ€์ƒ์ด๋‹ค. ์ด๊ฒƒ์€ effect์— ๋Œ€ํ•œ ์˜์กด์„ฑ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
useEffect(() => {
  fetchMoviesHandler();
}, [fetchMoviesHandler]);
  • useEffect ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž์ธ ์˜์กด์„ฑ ๋ฐฐ์—ด์— fetchMoviesHandler๋ฅผ ํฌ์ธํ„ฐํ•˜์ž. ์ด fetchMoviesHandler ํ•จ์ˆ˜๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด effect๋Š” ์žฌ์‹คํ–‰ ๋  ๊ฒƒ์ด๊ณ , ๋งŒ์•ฝ ์™ธ๋ถ€ ์ƒํƒœ(state)๋ฅผ ์ด์šฉํ•œ๋‹ค๋ฉด ์ด fetchMoviesHandler ํ•จ์ˆ˜๋„ ๋ฐ”๋€” ์ˆ˜ ์žˆ์œผ๋‹ˆ ๋ง์ด๋‹ค.

ํ•จ์ˆ˜๋ฅผ ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ—€์„ ๋•Œ ๋ฌดํ•œ ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค

  • fetchMoviesHandler๋Š” ํ•จ์ˆ˜์ด๊ณ , ๊ฐ์ฒด์ด๊ธฐ ๋•Œ๋ฌธ์— ์ปดํฌ๋„ˆํŠธ๊ฐ€ ์žฌ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ์ด fetchMoviesHandler ํ•จ์ˆ˜ ์—ญ์‹œ ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ด fetchMoviesHandler ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฒŒ ๋˜๋ฉด ๋ฌดํ•œ ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒ๋  ๊ฒƒ์ด๋‹ค. ๋ฌดํ•œ ๋ฃจํ”„๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ด fetchMoviesHandler ํ•จ์ˆ˜๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋Š”๋ฐ, ๋˜ ๋‹ค์‹œ ๋ฌดํ•œ ๋ฃจํ”„๊ฐ€ ๋ฐœ์ƒํ•˜๋‹ค๋‹ˆ ๋งค์šฐ ์˜์•„ํ•  ๊ฒƒ์ด๋‹ค. ํ•˜์ง€๋งŒ ์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” ์ƒˆ๋กœ์šด ํ•ด๊ฒฐ์ฑ…์„ ํ†ตํ•ด ๋ฌดํ•œ ๋ฃจํ”„๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

useCallback์„ ํ†ตํ•œ ๋ฌดํ•œ ๋ฃจํ”„ ๋ฐฉ์ง€ํ•˜๊ธฐ

async function fetchMoviesHandler() {
  ...

}
  • ๋ฌดํ•œ ๋ฃจํ”„์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ… ์ค‘ ํ•˜๋‚˜๋Š” ํ•จ์ˆ˜๋ฅผ ์˜์กด์„ฑ ๋ฐฐ์—ด์—์„œ ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์‚ฌ์‹ค ์˜์กด์„ฑ ๋ฐฐ์—ด์—์„œ ์ œ๊ฑฐ๋˜์–ด๋„, ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋Š” ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•˜์ง€๋งŒ ํ•จ์ˆ˜๊ฐ€ ์™ธ๋ถ€ ์ƒํƒœ๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ํ•œ๋‹ค๋ฉด, ์˜๋„์น˜ ์•Š์€ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค. ๋•Œ๋ฌธ์— ์ด์— ๋Œ€ํ•œ ๊ฐ€์žฅ ์ข‹์€ ํ•ด๊ฒฐ์ฑ…์€ useCallback ํ›…์„ ์‚ฌ์šฉํ•ด์„œ ์šฐ๋ฆฌ์˜ ํ•จ์ˆ˜ fetchMoviesHandler๋ฅผ ๊ฐ์‹ธ๋Š” ๊ฒƒ์ด๋‹ค.
const fetchMoviesHandler = useCallback(() => {
  ...
});
  • ์ด๋ฅผ ์œ„ํ•ด์„œ fetchMoviesHandler ํ•จ์ˆ˜๋Š” useCallback์˜ ๊ฒฐ๊ณผ๋ฅผ ์ €์žฅํ•˜๋Š” ์ƒ์ˆ˜๊ฐ€ ๋˜์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์ˆ˜ ํ˜•ํƒœ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ , ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ด๋ฅผ ๊ฐ์‹ธ์ค€๋‹ค. ๊ทธ๋ฆฌ๊ณ  useCallback์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž์ธ ์˜์กด์„ฑ ๋ฐฐ์—ด๋„ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.
const fetchMoviesHandler = useCallback(() => {
  ...
}, []);
  • ํ•ด๋‹น ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋“  ์˜์กด์„ฑ์„ ์˜์กด์„ฑ ๋ฐฐ์—ด์˜ ๋ชฉ๋ก ์•ˆ์— ํฌ์ธํ„ฐ ํ•ด์ค˜์•ผํ•˜์ง€๋งŒ fetchMoviesHandler ํ•จ์ˆ˜๋Š” ์™ธ๋ถ€ ์˜์กด์„ฑ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋นˆ ์ƒํƒœ๋กœ ํ‘œ๊ธฐํ•œ๋‹ค. fetchMoviesHandler ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉํ•˜๋Š” fetch API ๋Š” ๊ธ€๋กœ๋ฒŒ ๋ธŒ๋ผ์šฐ์ € API ์ด๊ณ  ์ด๋Š” ์˜์กด์„ฑ์ด ์•„๋‹ˆ๋ฉฐ, ๋˜ํ•œ setMovies, setError, setIsLoding ๊ฐ™์€ ์ƒํƒœ(state) ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์ ˆ๋Œ€ ๋ณ€๊ฒฝ์ด ์ผ์–ด๋‚˜์ง€ ์•Š์„ ๊ฒƒ์ด๋ผ ๋ณด์žฅํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์˜์กด์„ฑ์œผ๋กœ ์ถ”๊ฐ€ํ•  ํ•„์š”๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
const fetchMoviesHandler = useCallback(async () => {
  ...
}, []);
  • ์ด์™ธ์— ์ด์ „์— async/await๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ž‘์—…ํ•ด์™”๋˜ ๊ฒƒ์„ ๊ทธ๋Œ€๋กœ ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด async ์˜ˆ์•ฝ์–ด๋ฅผ ์ต๋ช… ํ•จ์ˆ˜ ์•ž์— ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

  • ์ด์ œ ์ €์žฅํ•˜๊ณ  ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•ด๋ณด๋ฉด ๋ฌดํ•œ ๋ฃจํ”„๋„ ๋ฐฉ์ง€ํ•˜๋ฉด์„œ ์ฆ‰๊ฐ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ fetch ํ•ด์˜ด๊ณผ ๋™์‹œ์—, ๋ฒ„ํŠผ์„ ํ†ตํ•ด์„œ ์ˆ˜๋™์œผ๋กœ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•  ์ˆ˜๋„ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

โœง ๋‹ค์Œ ๋‹จ๊ณ„๋ฅผ ์œ„ํ•œ ํ”„๋กœ์ ํŠธ ์ค€๋น„ํ•˜๊ธฐ

  • ์ง€๊ธˆ๊นŒ์ง€๋Š” ์„ค์ •ํ•ด๋‘” URL ์— fetch ์š”์ฒญ(default๋Š” 'GET')์„ ๋ณด๋‚ด๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™”๋‹ค. ํ•˜์ง€๋งŒ ์‹ค์ œ ํ™˜๊ฒฝ์—์„œ๋Š” ๋งŽ์€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ฐ์ดํ„ฐ fetch ๋งŒ์œผ๋กœ ๋๋‚˜์ง€ ์•Š์œผ๋ฉฐ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š” ์ž‘์—…๋„ ํ•„์š”ํ•  ๋•Œ๊ฐ€ ๋งŽ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์ƒˆ๋กœ์šด ์‚ฌ์šฉ์ž๋ฅผ ๋งŒ๋“ค ๋•Œ๋ผ๋˜๊ฐ€ ๋ง์ด๋‹ค. ๋”ฐ๋ผ์„œ App ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ AddMovie๋ฅผ ์ถ”๊ฐ€ํ–ˆ๋‹ค.
<AddMovie onAddMovie={addMovieHandler} />
  • ์ด AddMovie ์ปดํฌ๋„ŒํŠธ์—๋Š” movies๋ฅผ ์ฝ˜์†” ๋กœ๊ทธ์— ๋‚จ๊ธฐ๋Š” addMovieHandler ํ•จ์ˆ˜๋„ ํฌ์ธํ„ฐ ํ–ˆ๋‹ค.
function addMovieHandler(movie) {
  console.log(movie);
}
  • AddMovie ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด๋ฉด, ์‚ฌ์šฉ์ž ์ž…๋ ฅ ์–‘์‹์„ ๋ Œ๋”๋งํ•˜๊ณ  ์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๋ฐ›๊ณ  ์žˆ๋Š” ๊ฑธ ์•Œ์ˆ˜ ์žˆ๋‹ค.
function AddMovie(props) {
  const titleRef = useRef('');
  const openingTextRef = useRef('');
  const releaseDateRef = useRef('');

  function submitHandler(event) {
    event.preventDefault();
    // could add validation here...
    const movie = {
      title: titleRef.current.value,
      openingText: openingTextRef.current.value,
      releaseDate: releaseDateRef.current.value,
    };

    props.onAddMovie(movie);
  }

  ...
}
  • ์šฐ๋ฆฌ๋Š” AddMovie์—์„œ ๋ Œ๋”๋งํ•˜๋Š” ํผ์„ ํ†ตํ•ด์„œ ์˜ํ™”๋ฅผ ์ง์ ‘ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ ๊ฒƒ์ด๋‹ค.

  • ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉ ์ค‘์ธ URL("https://swapi.dev/api/films/") ์€ ์˜ํ™” ์ •๋ณด ๋ฐ์ดํ„ฐ ์ˆ˜์‹ ('GET')์„ ์œ„ํ•œ ๋”๋ฏธ API ์ด๋‹ค. ์™ธ๋ถ€์—์„œ ๋“ค์–ด์˜ค๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ์ง€๊ธˆ ์šฐ๋ฆฌ๊ฐ€ AddMovie ์ปดํฌ๋„ŒํŠธ ํผ์„ ์ด์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ ์ž ํ•˜๋Š” 'POST' ์š”์ฒญ์€ ์•„์ง ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋‹ค. ๊ทธ๋ ‡๊ธฐ์— ์šฐ๋ฆฌ๊ฐ€ 'POST' ์š”์ฒญ์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋˜ ๋‹ค๋ฅธ ๋”๋ฏธ API๋ฅผ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ํ•œ๋‹ค. ๋ฐ”๋กœ ๊ตฌ๊ธ€์ด ์ œ๊ณตํ•˜๋Š” ๋ฐ์ดํ„ฐ ์ €์žฅ ์„œ๋น„์Šค์ธ Firebase ์ด๋‹ค.

Firebase ๋กœ ๋ฐฑ์—”๋“œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ๊ตฌ์ถ•ํ•˜๊ธฐ

  • Firebase ๋Š” ๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•˜๋Š” ์„œ๋น„์Šค๋กœ, ์ฝ”๋“œ ์ž‘์„ฑ ์—†์ด๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฐฑ์—”๋“œ ์„œ๋น„์Šค์ด๋‹ค. Firebase ์ž์ฒด๊ฐ€ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๊ทธ๋ ‡์ง€ ์•Š๋‹ค. ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์— ๋”ธ๋ฆฐ '๋ฐฑ์—”๋“œ' ์ธ ๊ฒƒ์ด๋‹ค. ์ฆ‰, ์šฐ๋ฆฌ๊ฐ€ ์š”์ฒญ์„ ์ฃผ๊ณ  ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์™„์ „ํ•œ REST API ๋ฅผ ์ œ๊ณตํ•˜๋Š” 'ํ’€ ๋ฐฑ์—”๋“œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜' ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  • Firebase ์˜ ์„œ๋น„์Šค์˜ ์ข‹์€ ์ ์€ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์— ์žˆ๋‹ค. ๋”๋ฏธ ๋ฐฑ์—”๋“œ๋ฅผ ์ด์šฉํ•ด์„œ ์„œ๋ฒ„ ๊ธฐ๋ฐ˜ ์ฝ”๋“œ ์—†์ด ๋ฌด๋ฃŒ๋กœ ์‹ค์Šต์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์šฐ๋ฆฌ๋Š” ์ด ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.

Firebase ์‚ฌ์šฉํ•˜๊ธฐ

  • ๋จผ์ € ๊ตฌ๊ธ€ ๊ณ„์ •์œผ๋กœ ๋กœ๊ทธ์ธํ•˜๊ณ , Firebase ์ฝ˜์†”๋กœ ์ด๋™ํ•œ๋‹ค.

  • ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ์˜ ์ด๋ฆ„์„ ์ •ํ•˜๊ณ  ์ถ”๊ฐ€ ํ•œ ๋’ค,

  • ๊ตฌ๊ธ€ ํ†ต๊ณ„๋Š” ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋น„ํ™œ์„ฑํ™” ํ•˜๊ณ , ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.

  • ๋ช‡ ๋ถ„ ํ›„์—, Firebase ์˜ ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค.

Firebase ๋Š” ๊ตฌ๊ธ€์—์„œ ์ œ๊ณตํ•˜๋Š” ์„œ๋น„์Šค์ด๊ณ , ์ „์ฒด ์„œ๋น„์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์žˆ๋Š” ์ œํ’ˆ๊ณผ ์„œ๋น„์Šค๊ฐ€ ๋งค์šฐ ๋‹ค์–‘ํ•˜๋‹ค. ํ•˜์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์ง€๊ธˆ ๋ณต์žกํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ ์ค‘ ์ผ๋ถ€๋ถ„๋งŒ์„ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค.

  • ํ”„๋กœ์ ํŠธ๊ฐ€ ๋งŒ๋“ค์–ด์ง€๋ฉด, Firebase์˜ ์ฝ˜์†”๋กœ ๋Œ์•„์™€, Realtime Database(์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค)ํƒญ์œผ๋กœ ์ด๋™ํ•œ๋‹ค. ๋‹ค์‹œ ํ•œ๋ฒˆ ๋งํ•˜์ง€๋งŒ, Firebase ๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ์•„๋‹ˆ๋ฉฐ, ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ ์ค‘ ์ผ๋ถ€๊ฐ€ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์ผ ๋ฟ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  Firebase ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ์„œ๋น„์Šค๋Š” 2๊ฐœ๊ฐ€ ์žˆ๋Š”๋ฐ, ์—ฌ๊ธฐ์„œ Firestore Database(์ด์ „์—” Cloude Firestore) ๊ฐ€ ๊ธฐ๋Šฅ์ƒ ์กฐ๊ธˆ ๋” ๊ฐ•๋ ฅํ•˜์ง€๋งŒ, ๊ฐ„๋‹จํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ๋”๋ฏธ ๋ฐฑ์—”๋“œ๋งŒ ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— Realtime Database ๋ฉด ์ถฉ๋ถ„ํ•˜๊ธฐ์— Realtime Database ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค.

  • ์ด์ œ Realtime Database ํƒญ ํŽ˜์ด์ง€๋กœ ๋“ค์–ด์™€์„œ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ์„ค์ •์—์„œ ๋ฐ˜๋“œ์‹œ 'ํ…Œ์ŠคํŠธ ๋ชจ๋“œ'๋ฅผ ์„ ํƒํ•œ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์š”์ฒญ ์ „์†ก์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

  • ์ด์ œ ๊ฐ„๋‹จํ•œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๊ฐ€ ๋งŒ๋“ค์–ด์กŒ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์™€ ํ†ต์‹ ํ•  API URL ์—ญ์‹œ ์ œ๊ณต๋œ๋‹ค.

๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์—์„œ ์ œ๊ณตํ•˜๋Š” URL์€ Firebase REST API์— ๋Œ€ํ•œ URL ์ด๋‹ค.

  • ์ด ๋ง์ธ ์ฆ‰์Šจ, ํ”„๋ก ํŠธ์—”๋“œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์™€ ์ง์ ‘ ํ†ต์‹ ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ณ , ๋˜ ๊ฐ€๋Šฅํ•˜๋”๋ผ๋„ ๊ทธ๋ ‡๊ฒŒ ํ•ด์„œ๋Š” ์•ˆ๋œ๋‹ค. (์•ž์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ๊ฑฐ๋ก ํ•œ ๋ฌธ์ œ์ด๋‹ค.) ์•„๋ฌดํŠผ ์ด URL์€ Firebase REST API์— ๋Œ€ํ•œ URL ์ด๋ฉฐ, ์ด API ๋Š” ๋“ค์–ด์˜ค๋Š” ์š”์ฒญ์„ ๋ฐ›๊ณ  ๋ฐฑ๊ทธ๋ผ์šด๋“œ์˜ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์™€ ํ†ต์‹  ํ•  ๋ฟ์ด๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๋ณด๊ธฐ์—” ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์™€ ์ง์ ‘ ์†Œํ†ตํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์‹ค์ œ๋กœ๋Š” ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋Š” ๋œป์ด๋‹ค.

Firebase API์˜ URL ๋กœ ๋Œ€์ฒดํ•˜๊ธฐ

  • ์ด์ œ ์šฐ๋ฆฌ๋Š” Firebase API๊ฐ€ ์ œ๊ณตํ•˜๋Š” URL์„ ํ†ตํ•ด์„œ Firebase ๋ฐฑ์—”๋“œ, ์ฆ‰ ์šฐ๋ฆฌ์˜ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.
const response = await fetch("https://react-http2-xxxxxxx.firebaseio.com/");
  • ๊ธฐ์กด์˜ ์˜ํ™” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋˜ URL์„ ์‚ญ์ œํ•˜๊ณ , ์šฐ๋ฆฌ๊ฐ€ ์ œ๊ณต๋ฐ›์€ URL ์ฃผ์†Œ๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.
const response = await fetch(
  "https://react-http2-xxxxxxx.firebaseio.com/movies.json"
);
  • ๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ์ฃผ์†Œ ๋’ค์— movies.json ์ด๋ผ๋Š” ์„ธ๊ทธ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด movies ๋ผ๋Š” ์ด๋ฆ„์€ ์šฐ๋ฆฌ๊ฐ€ ์ž„์˜๋กœ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์šฐ๋ฆฌ๊ฐ€ ์ง€์ •ํ•œ ์ด๋ฆ„ movies๋กœ ๋…ธ๋“œ๊ฐ€ ์ƒˆ๋กญ๊ฒŒ ๋งŒ๋“ค์–ด์ง€๊ฒŒ ๋œ๋‹ค. ์ด๊ฒƒ์€ ๋™์  REST API ๋กœ ์„œ๋กœ ๋‹ค๋ฅธ ์„ธ๊ทธ๋จผํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์˜ ์„œ๋กœ ๋‹ค๋ฅธ ๋…ธ๋“œ๋“ค์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ์„ค์ •ํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ์ด๋ฆ„์€ ์šฐ๋ฆฌ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฌด์—‡์œผ๋กœ ๊ด€๋ฆฌํ•  ๊ฒƒ์ธ์ง€์— ๋”ฐ๋ผ ์ด๋ฆ„์„ ์ง๊ด€์ ์œผ๋กœ ์ •ํ•ด์„œ ์„ค์ •ํ•ด์ค€๋‹ค.

.json ํ™•์žฅ์ž๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•˜๋Š” ์ด์œ 

  • movies์— ํ™•์žฅ์ž .json์„ ์ถ”๊ฐ€ํ•˜๋Š” ์ด์œ ๊ฐ€ ๊ถ๊ธˆํ•  ๊ฒƒ์ด๋‹ค. ์ด๋Š” Firebase์˜ ์š”๊ตฌ ์‚ฌํ•ญ์œผ๋กœ, ์š”์ฒญ์„ ์ „๋‹ฌํ•˜๋ ค๋Š” URL ๋์— .json์„ ๋ฐ˜๋“œ์‹œ ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค. ๋งŒ์•ฝ ์ด ํ™•์žฅ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด, ์š”์ฒญ์€ ์‹คํŒจํ•˜๊ฒŒ ๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

โœง POST ์š”์ฒญ ๋ณด๋‚ด๊ธฐ

  • ์ด์ œ ๋‚จ์€ ๊ฑด POST ์š”์ฒญ์„ ์ „์†กํ•˜๊ณ  ๋‚ด๊ฐ€ ํผ์— ์ž…๋ ฅํ•œ ๋ฐ์ดํ„ฐ๋ฅผ Firebase ์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
function addMovieHandler(movie) {
  console.log(movie);
}
  • ์šฐ๋ฆฌ๊ฐ€ ์ด์ „์— ์„ค์ •ํ•ด๋‘์—ˆ๋˜ addMovieHandler ํ•จ์ˆ˜๋ฅผ ๋ณด์ž. ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด addMovieHandler๊ฐ€ movie ๋ผ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์•„ ์ฝ˜์†”์— ์ถœ๋ ฅํ•˜๋Š” ๋กœ์ง์ด๋‹ค.
function submitHandler(event) {
  event.preventDefault();

  // could add validation here...

  const movie = {
    title: titleRef.current.value,
    openingText: openingTextRef.current.value,
    releaseDate: releaseDateRef.current.value,
  };

  props.onAddMovie(movie);
}
  • AddMovie ์ปดํฌ๋„ŒํŠธ์—์„œ props ๋กœ ์ „๋‹ฌ๋ฐ›์€ onAddMovie(addMovieHandler)์— ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋„˜๊ฒจ์ฃผ๋Š” moive ์˜ ํ˜•ํƒœ๋Š” ์–ด๋–ค๊ฐ€? ์œ„์˜ ์ฝ”๋“œ์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด moive ๋ผ๋Š” ์ด๋ฆ„์˜ ๊ฐ์ฒด ์•ˆ์—๋Š” title๊ณผ openingText ๊ทธ๋ฆฌ๊ณ  releaseDate๋ฅผ ๋‹ด๊ฒจ์žˆ๋‹ค. (id๋Š” firebase์—์„œ ์ž๋™์ ์œผ๋กœ ์ถ”๊ฐ€๋œ๋‹ค.) ๊ทธ๋Ÿฌ๋‹ˆ, ์ด addMovieHandler ์—์„œ๋Š” ferch API๋ฅผ ์ด์šฉํ•ด์„œ ๋˜ ๋‹ค๋ฅธ HTTP ์š”์ฒญ์„ ์ „์†กํ•ด์•ผ ํ•œ๋‹ค. ์ด์ „์—๋„ ๊ฑฐ๋ก ํ•œ ์ด์•ผ๊ธฐ์ง€๋งŒ fetch ๋ผ๊ณ  ํ•ด๋„ ์‚ฌ์‹ค์ƒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์—ญํ• ๋งŒ ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋Š” ๋ฐ์—๋„ fetch ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
function addMovieHandler(movie) {
  console.log(movie);
}
  • ๋‹ค์‹œ, addMovieHandler๋กœ ๋Œ์•„์™€์„œ, ๋ฐ์ดํ„ฐ๋ฅผ firebase์— ์š”์ฒญํ•ด์„œ ์ „์†กํ•˜๋Š” ๋กœ์ง์„ ์ถ”๊ฐ€ํ•˜๋„๋ก ํ•˜์ž. ์šฐ๋ฆฌ์˜ ๋ชฉ์ ์€ ์š”์ฒญ ์ „์†ก์ด๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” URL ์— ๋ฐ˜๋Œ€๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ €์žฅ ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์—†์„ ๊ฒƒ์ด๋‹ค.

fetch ๋กœ POST ์š”์ฒญ ๋ณด๋‚ด๊ธฐ

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json");

  console.log(movie);
}
  • ๋จผ์ € fetch() ๋ฅผ ๋ถˆ๋Ÿฌ์™€์„œ firebase ๋กœ๋ถ€ํ„ฐ ์ œ๊ณต๋ฐ›์€ ๊ธฐ์กด์˜ URL์„ ์ถ”๊ฐ€ํ•œ๋‹ค. ํ•˜์ง€๋งŒ fetch API ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ 'GET' ์ด default ์ด๊ธฐ ๋–„๋ฌธ์— 'POST' ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” fetch API ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค.
function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {});

  console.log(movie);
}

fetch API ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž - method

  • fetch API ๋‘ ๋ฒˆ์งธ ์ธ์ž๋ฅผ ์ง€์šฉํ•ด์„œ ์™ธ๋ถ€๋กœ ์ „์†กํ•˜๋Š” ์š”์ฒญ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š”๋ฐ, ๋ณดํ†ต์€ method ํ‚ค ๊ฐ™์€ ๊ฒƒ์„ ์ง€์ •ํ•œ๋‹ค. fetch API์˜ ๊ธฐ๋ณธ ๊ฐ’์€ 'GET' ์ด์ง€๋งŒ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ฒƒ์€ 'POST' ์ด๋ฏ€๋กœ, ์—ฌ๊ธฐ์— 'POST'๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
  });

  console.log(movie);
}
  • ์ด๋ ‡๊ฒŒ, Firebase ์„œ๋น„์Šค์— 'POST' ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด Firebase๋Š” ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค์— ๋ฆฌ์†Œ์Šค๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค. 'POST' ์š”์ฒญ์„ ๋ณด๋ƒˆ์„ ๋•Œ ์ •ํ™•ํžˆ ์–ด๋–ค ์ผ์ด ๋ฐœ์ƒํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฑ์—”๋“œ์— ๋‹ฌ๋ ค์žˆ๊ฒŒ ๋œ๋‹ค. 'POST' ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ๋ฆฌ์†Œ์Šค๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค๋Š” ๊ฒŒ ์ผ๋ฐ˜์ ์œผ๋กœ๋Š” ๊ทธ๋Ÿฐ ์˜๋ฏธ๋กœ ํ†ตํ•˜์ง€๋งŒ ์–ด๋–ค ๋ฒ•์น™ ๊ฐ™์€ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ๋‹ค๋งŒ ๋ชจ๋‘ API ์— ๋‹ฌ๋ฆฐ ๋ฌธ์ œ์ธ ๊ฒƒ์ด๋‹ค.

fetch API ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž - body

  • Firebase ์—์„œ๋Š” 'POST' ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋˜๋ฉด ๋ฆฌ์†Œ์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋‘”๋‹ค. ์ด์ œ ์ €์žฅํ•ด์•ผ ํ•˜๋Š” ๋ฆฌ์†Œ์Šค๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ fetch API ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž์— body ๋ผ๋Š” ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•œ๋‹ค.
function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: movie,
  });

  console.log(movie);
}
  • body ์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ถ”๊ฐ€ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ์„ ์ ๋Š”๋‹ค. ์ด๋ฒˆ์—๋Š” movie ๋ผ๋Š” ๋งค๊ฐœ ๋ณ€์ˆ˜(๊ฐ์ฒด)๋ฅผ ๋ฐ›์•„ body ์— ๋„˜๊ฒจ์ค„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๊ฐ’์œผ๋กœ ์ง€์ •ํ•œ๋‹ค.
function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
  });

  console.log(movie);
}
  • ํ•˜์ง€๋งŒ, body๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ JSON ๋ฐ์ดํ„ฐ๋ฅผ ํ•„์š”๋กœ ํ•œ๋‹ค. JSON์€ ๋ฐ์ดํ„ฐ ํ˜•ํƒœ๋กœ ํ”„๋ก ํŠธ์—”๋“œ์™€ ๋ฐฑ์—”๋“œ ๊ฐ„์˜ ๋ฐ์ดํ„ฐ ๊ตํ™˜์— ์‚ฌ์šฉ๋˜๋Š” ์œ ํ˜•์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด์ œ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋„˜๊ฒจ ๋ฐ›์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด movie ๋ฅผ JSON์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋ ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์žˆ๋Š” ๋‚ด์žฅ ๋ฉ”์†Œ๋“œ์ธ JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. JSON.stringify()๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋‚˜ ๋ฐฐ์—ด์„ JSON ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

fetch API ์˜ ๋‘ ๋ฒˆ์งธ ์ธ์ž - headers

function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
    headers: {},
  });

  console.log(movie);
}
  • ๋งˆ์ง€๋ง‰์œผ๋กœ ์กฐ๊ธˆ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ headers ํ‚ค๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. headers ํ‚ค๋ฅผ ์ถ”๊ฐ€ํ•  ๋•Œ๋Š” ๊ฐ’์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค.
function addMovieHandler(movie) {
  fetch("https://react-http2-xxxxxxx.firebaseio.com/movies.json", {
    method: "POST",
    body: JSON.stringify(movie),
    headers: {
      "Content-Type": "application/json",
    },
  });

  console.log(movie);
}
  • headers์˜ ๊ฐ์ฒด ๊ฐ’ ์•ˆ์— "Content-Type" ์„ ํ‚ค๋กœ ์ง€์ •ํ•˜๊ณ , ๊ฐ’์œผ๋กœ๋Š” "application/json" ์„ ๋„ฃ์–ด์ค€๋‹ค. Firebase ์—๋Š” headers๊ฐ€ ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. headers ํ‚ค๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์ง€ ์•Š๋”๋ผ๋„ ์š”์ฒญ์€ ์ •์ƒ์ €๊ธ๋กœ ์ฒ˜๋ฆฌํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•˜์ง€๋งŒ ์š”์ฒญ์„ ๋ฐ›๋Š” ๋˜ ๋‹ค๋ฅธ ๋Œ€๋‹ค์ˆ˜์˜ API๋Š” ์ด๋Ÿฌํ•œ headers ๋ฅผ ํ•„์š”๋กœ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค. ์š”์ฒญ์„ ๋ฐ›๋Š” API์—์„œ๋Š” ์ด headers๋ฅผ ํ†ตํ•ด์„œ ์–ด๋–ค ์ปจํ…์ธ ๊ฐ€ ์ „๋‹ฌ๋˜๋Š”์ง€๋ฅผ ์•Œ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

async/await๋กœ fetch API๋กœ ์ „์†ก๋˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ

  • fetch API๋Š” ๋น„๋™๊ธฐ ์ž‘์—…์ด๋ฉฐ ํ”„๋กœ๋ฏธ์Šค๋ฅผ ๋Œ๋ ค๋ฐ›์„ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์•ž์„œ ์˜ํ™” ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™”์„ ๋•Œ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ async/await๋ฅผ ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•œ๋‹ค.
async function addMovieHandler(movie) {
  const response = await fetch(
    "https://react-http2-xxxxxxx.firebaseio.com/movies.json",
    {
      method: "POST",
      body: JSON.stringify(movie),
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  const data = await response.json();
  console.log(data);
}
  • fetch ํ•˜๋Š” ๋กœ์ง์„ response ๋ผ๋Š” ์ƒ์ˆ˜๋กœ await์„ ๋ถ™์—ฌ ๊ฐ€์ ธ์˜จ ๋’ค await ๋กœ response.json()์„ ํ†ตํ•ด JSON ํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ data ์ƒ์ˆ˜์— ํ• ๋‹นํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋งˆ์ง€๋ง‰์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ˜์†” ๋กœ๊ทธ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฝ˜์†” ๋กœ๊ทธ๋„ ์ถ”๊ฐ€ํ•ด์ค€๋‹ค.

๋ฌผ๋ก  ์ด ๋ชจ๋“  ๊ณผ์ •์—์„œ ์ด์ „์— ํ•™์Šตํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ์š”์ฒญ(response)์— ๋Œ€ํ•œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ๋„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

  • ์ƒˆ๋กœ ๊ณ ์นจ ํ›„ ์˜ํ™” ์ œ๋ชฉ๊ณผ ํ…์ŠคํŠธ, ๋‚ ์งœ๋ฅผ ์ ๋‹นํžˆ ์ ์–ด์„œ "Add Movie" ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ๋ณด์ž. ์šฐ๋ฆฌ๊ฐ€ ์ฝ˜์†”์—์„œ data๋ฅผ ์ถœ๋ ฅํ–ˆ๋˜ ๊ฒƒ์ด ๊ทธ๋Œ€๋กœ ์ถ”๊ฐ€๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Firebase ๋ฐฑ์—”๋“œ๋กœ ๋Œ์•„์™€ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ํ•ญ๋ชฉ์„ ํ™•์ธํ•ด๋ณด๋ฉด movies ๋ผ๋Š” ์ƒˆ๋กœ์šด ๋…ธ๋“œ๊ฐ€ ์ถ”๊ฐ€๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ด์ „์— URL ๋’ค์— movies.json์„ ์ ์–ด์„œ ์ „์†ก ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด moives ๋ผ๋Š” ๋…ธ๋“œ ์•ˆ์—๋Š” ๋ฐฉ๊ธˆ Firebase๊ฐ€ ์ž๋™ ์ƒ์„ฑํ•œ ์•”ํ˜ธํ™” ๋œ ID๊ฐ€ ์žˆ๊ณ , ์ด ์•ˆ์„ ๋ณด๋ฉด ์šฐ๋ฆฌ๊ฐ€ ํผ์— ์ž…๋ ฅํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ €์žฅ๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ ์ฝ˜์†”์—์„œ๋Š” Firebase ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ response ๊ฐ์ฒด๊ฐ€ ์ถœ๋ ฅ๋˜์–ด ์žˆ๊ณ , name ํ•„๋“œ์— Firebase๊ฐ€ ์ž๋™ ์ƒ์„ฑ๋œ ID ๋ฅผ ์ ์–ด์„œ ์‘๋‹ตํ–ˆ๋‹ค.

Firebase์˜ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ

  • ์ง€๊ธˆ๊นŒ์ง€ 'POST' ์š”์ฒญ์„ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์— ๋Œ€ํ•ด์„œ ํ•™์Šตํ–ˆ๋‹ค. ์ด์ œ ์šฐ๋ฆฌ๋Š” "Fetch Movies" ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ์— ์ €์žฅํ•ด๋‘” ์˜ํ™” ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค์‹œ ๊ฐ€์ ธ์™€์•ผ ํ•œ๋‹ค.

  • ์˜ํ™” ๋ชฉ๋ก์ด ๋ Œ๋”๋ง ๋˜๋˜ ์œ„์น˜์—์„œ ์ถœ๋ ฅ๋˜๊ณ  ์žˆ๋Š” ์˜ค๋ฅ˜ ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋ฉด, ์•ž์„œ ๋งŒ๋“ค์–ด๋‘์—ˆ๋˜ ๋กœ์ง์ด ๋”์ด์ƒ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฑธ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

Cannot read properties of undefined (reading 'map')

const fetchMoviesHandler = useCallback(async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch(
      "https://react-http2-xxxxxxx.firebaseio.com/movies.json"
    );
    if (!response.ok) {
      throw new Error("Something went wrong!");
    }

    const data = await response.json();

    console.log(data);

    const transformedMovies = data.results.map((movieData) => {
      return {
        id: movieData.episode_id,
        title: movieData.title,
        openingText: movieData.opening_crawl,
        releaseDate: movieData.release_date,
      };
    });
    setMovies(transformedMovies);
  } catch (error) {
    setError(error.message);
  }
  setIsLoading(false);
}, []);
  • movies ๋ฐ์ดํ„ฐ๋ฅผ "GET" ํ•ด์˜ค๋˜ ๋กœ์ง fetchMoviesHandler ํ•จ์ˆ˜๋กœ ๋Œ์•„๊ฐ€๋ณด์ž. ๊ทธ ์ „์— ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•œ ์‹ค์Šต์šฉ ์˜ํ™” ๋ฐ์ดํ„ฐ์—์„œ๋Š” results ํ•„๋“œ๊ฐ€ ์žˆ์„ ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ–ˆ์ง€๋งŒ, ์ง€๊ธˆ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ์—์„œ๋Š” ํ•ด๋‹น ํ•„๋“œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด ๋ถ€๋ถ„์˜ ์ˆ˜์ •์ด ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™๋‹ค.
const data = await response.json();
console.log(data);
  • data๋ฅผ fetch ํ•ด์˜ค๋Š” ๋ถ€๋ถ„์— ์ฝ˜์†” ๋กœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•ด์„œ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•ด๋ณด๋ฉด,

  • data ๊ฐ€ ๊ฐ์ฒด๋กœ ๋„˜์–ด์™”๊ณ , ์ด ๊ฐ์ฒด ์•ˆ์— ์•”ํ˜ธํ™”๋œ ID ํ‚ค๊ฐ€ ์žˆ์œผ๋ฉฐ, ์‹ค์ œ๋กœ ์ €์žฅ๋œ ์˜ํ™” ๋ฐ์ดํ„ฐ๋Š” ์ค‘์ฒฉ๋œ ๊ฐ์ฒด๋กœ ๋‚˜ํƒ€๋‚˜๊ณ  ์žˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ๋ฐฐ์—ด๋กœ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๊ณ  ๊ฐ์ฒด๋กœ ๋ฐ›์•„์˜ค๊ณ  ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. (id๊ฐ€ key ์ด๋ฉฐ, ์‹ค์ œ ๋ฐ์ดํ„ฐ๋Š” ์ค‘์ฒฉ ๊ฐ์ฒด์ด๋‹ค.) ์ด์ œ ์ด๊ฒƒ data ๋ฅผ ๋‹ค์‹œ ๋ณ€ํ™˜ํ•œ ๊ฐ’์„ setMovies์— ๋‹ด์•„์„œ ์ƒํƒœ(state)๋ฅผ ๊ฐฑ์‹ ํ•ด์ค„ ๊ฒƒ์ด๋‹ค.

์ค‘์ฒฉ ๊ฐ์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ

const loadedMovies = [];
  • ๋”์ด์ƒ map์€ ํ•„์š”ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ๋นˆ ๋ฐฐ์—ด์„ ํ•˜๋‚˜ ๋งŒ๋“  ๋’ค์—
const loadedMovies = [];

for (const key in data) {
}
  • for ๋ฃจํ”„์™€ key in์„ ์ด์šฉํ•ด์„œ ๊ฐ์ฒด ์•ˆ์˜ ๋ชจ๋“  key๋ฅผ ํ™•์ธํ•œ๋‹ค.
const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({});
}
  • ๊ทธ๋ฆฌ๊ณ  loadedMovies ๋ฐฐ์—ด์— push()๋ฅผ ์ด์šฉํ•ด์„œ ๊ฐ์ฒด๋ฅผ ํ‘ธ์‰ฌํ•˜๋Š”๋ฐ,
const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({
    id: key,
  });
}
  • id๋Š” ๊ธฐ๋ณธ์˜ key ๊ฐ’์œผ๋กœ ์„ค์ •ํ•˜๊ณ 

  • ์šฐ๋ฆฌ๊ฐ€ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ์ฒด์˜ key ๊ฐ’๋“ค์„ ๋ชจ๋‘ ํ™•์ธํ•ด์„œ
const loadedMovies = [];

for (const key in data) {
  loadedMovies.push({
    id: key,
    title: data[key].title,
    openingText: data[key].openingText,
    releaseDate: data[key].releaseDate,
  });
}
  • title๊ณผ openingText, releaseDate์˜ ๊ฐ’์œผ๋กœ ๋„ฃ์–ด์ค€๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด response ๋กœ ๋ฐ›์€ ์ค‘์ฒฉ ๊ฐ์ฒด๋ฅผ ํƒ€๊ณ  ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค. ์ด๊ฒƒ์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์†์„ฑ์— ๋Œ€ํ•œ '๋™์  ์ ‘๊ทผ ๋ฐฉ๋ฒ•' ์ด๋‹ค. ์ด์ œ loadedMovies๋Š” ๋‚ด๋ถ€์— ๊ฐ์ฒด๊ฐ€ ์žˆ๋Š” ๋ฐฐ์—ด์ด ๋˜๋ฉฐ, ๊ฐ ๊ฐ์ฒด๋Š” ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ตฌ์กฐ๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ธฐ์กด์˜ map์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์–ด๋‘์—ˆ๋˜ transformedMovies๋ฅผ ์‚ญ์ œํ•˜๊ณ ,
setMovies(loadedMovies);
  • setMovies์˜ ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๊ฐ’์œผ๋กœ loadedMovies ๋ฅผ ํฌ์ธํ„ฐ ํ•ด์ค€๋‹ค.

  • ์ €์žฅ ํ›„ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด, ์šฐ๋ฆฌ๊ฐ€ ์ €์žฅํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ MoviesList์— ์ •์ƒ์ ์œผ๋กœ ๋กœ๋“œ ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ์˜ํ™”๋ฅผ ๋˜ ๋‹ค๋ฅธ ํ…์ŠคํŠธ๋ฅผ ํ†ตํ•ด ์ถ”๊ฐ€ํ•ด๋ณด๊ณ , ๋‹ค์‹œ "Fetch Movies" ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด

  • ๋‘ ๋ฒˆ์งธ๋กœ ์ถ”๊ฐ€ํ•œ ์˜ํ™” ์—ญ์‹œ ์ •์ƒ์ ์œผ๋กœ ๋กœ๋“œ ๋˜๋Š” ๊ฑธ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

โœฆ ์ถœ์ฒ˜


๐Ÿšจ ํ•ด๋‹น ํฌ์ŠคํŒ…์€ Udemy์˜ โŒœReact ์™„๋ฒฝ ๊ฐ€์ด๋“œโŒŸ ๊ฐ•์˜๋ฅผ ๋ฒ ์ด์Šค๋กœ ํ•œ ๊ธฐ๋ก์ž…๋‹ˆ๋‹ค.
โœ๐Ÿป ๊ฐ•์˜ git repo ๋ฐ”๋กœ๊ฐ€๊ธฐ

profile
์ผ๋‹จ ๊ณต๋ถ€๊ฐ€ '์ ์„ฑ'์— ๋งž๋Š” ๊ฐœ๋ฐœ์ž. ๊ทผ์„ฑ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€