[React 04] - async / await, hoisting, mutation

yiwoojungยท2022๋…„ 7์›” 1์ผ
0

{C} Codecamp FE 06

๋ชฉ๋ก ๋ณด๊ธฐ
4/21
post-thumbnail

๐Ÿ—ฟ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ

  1. ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ
  2. Async-Await
  3. Hoisting (const, let, var / arrow function)
  4. Apollo-Client / Mutation

1. ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ

ํ”„๋ก ํŠธ์—”๋“œ๊ฐ€ ๋ฐฑ์—”๋“œ์— ์š”์ฒญ( req ) ์„ ๋ณด๋‚ด๋ฉด ๋ฐฑ์—”๋“œ๋Š” ๊ทธ์— ๋Œ€ํ•œ ์‘๋‹ต( res )์„ ๋ณด๋‚ด์ค€๋‹ค.

์ด๋•Œ ์„œ๋ฒ„ ์ปดํ“จํ„ฐ๊ฐ€ ์ž‘์—…์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์—๋Š” ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ๊ฐ€ ์žˆ๋‹ค.

๋™๊ธฐ๋Š” ์„œ๋ฒ„ ์ปดํ“จํ„ฐ๊ฐ€ ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๋Š” ํ†ต์‹ ์„ ๋งํ•œ๋‹ค.
ํ•˜๋‚˜์˜ ์ž‘์—…์ด ๋๋‚  ๋•Œ ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋‹ค์Œ ์ž‘์—…์„ ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

๋น„๋™๊ธฐ๋Š” ์„œ๋ฒ„ ์ปดํ“จํ„ฐ๊ฐ€ ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๋Š” ํ†ต์‹ ์„ ๋งํ•œ๋‹ค.
์„œ๋ฒ„์— ์š”์ฒญ ์ €์žฅ์ด ๋  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ์ž‘์—…์„ ์ง„ํ–‰ํ•œ๋‹ค.
์—ฌ๋Ÿฌ๊ฐœ๋ฅผ ๋™์‹œ์— ์š”์ฒญํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.


๊ฒŒ์‹œ๊ธ€ ๋“ฑ๋ก์ด ์™„๋ฃŒ๋˜๊ธฐ ์ „์— ๊ฒŒ์‹œ๊ธ€์„ ๋ถˆ๋Ÿฌ์˜ค๊ฒŒ ๋˜๋ฉด ๊ธ€์ด ์•ˆ๋ถˆ๋Ÿฌ์™€์ง„๋‹ค.

๊ทธ๋Ÿฌ๋ฏ€๋กœ ์ด๋ ‡๊ฒŒ ๋น„๋™๊ธฐ ์ž‘์—…๋“ค์€ ๋™๊ธฐ์‹์œผ๋กœ ํ•˜๋‚˜์”ฉ ํ•˜๋‚˜์”ฉ ์ž‘์—…์„ ์ง„ํ–‰ํ•ด์•ผ ๋œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋™๊ธฐ์‹์œผ๋กœ ์ž‘๋™๋˜๋Š”๋ฐ ์™ธ๋ถ€ ์ปดํ“จํ„ฐ์— ์š”์ฒญํ•˜๊ฒŒ ๋˜๋Š” ๊ธฐ๋Šฅ๋“ค์€ ๋น„๋™๊ธฐ์‹์œผ๋กœ ์ž‘๋™๋œ๋‹ค. ๊ทธ๋ž˜์„œ ๋น„๋™๊ธฐ์™€ ๋™๊ธฐ์— ๋Œ€ํ•ด์„œ ์•Œ์•„์•ผ ํ•œ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด ๋น„๋™๊ธฐ๋Š” ์–ธ์ œ ์“ฐ๋Š” ๊ฒƒ์ผ๊นŒ?

์š”์ฒญ๋“ค์ด ์„œ๋กœ ๊ธฐ๋‹ค๋ฆด ํ•„์š”๊ฐ€ ์—†์„ ๋•Œ ์“ธ ๊ฒƒ์ด๋‹ค.
๋™์‹œ์— ์—ฌ๋Ÿฌ ์ผ์„ ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

์˜ˆ๋ฅผ๋“ค์–ด ์œ„์˜ ์‚ฌ์ง„์ฒ˜๋Ÿผ ํ•œ ํ™”๋ฉด์— ๊ฒŒ์‹œ๋ฌผ ๋ชฉ๋ก๊ณผ ์ƒํ’ˆ ๋ชฉ๋ก์„ ๋‘˜ ๋‹ค ๊ฐ€์ ธ์™€์•ผ ํ•  ๋•Œ๋Š” ๋™์‹œ์— ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ผ์„ ํ•˜๋Š” ๋น„๋™๊ธฐ ๋ฐฉ์‹์ด ํ›จ์”ฌ ํšจ์œจ์ ์ด๋‹ค.


2. Async-Await

๋งŒ์•ฝ ์ด๋ ‡๊ฒŒ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  data๋ฅผ ์ฝ˜์†” ์ฐ์–ด๋ณธ๋‹ค๋ฉด data ๊ฐ์ฒด๊ฐ€ ์ฐํžˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ Promise๋ผ๊ณ  ์ฐํžˆ๊ฒŒ ๋œ๋‹ค.

์ด ์ด์œ ๋Š” axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋น„๋™๊ธฐ์‹์œผ๋กœ ์ž‘๋™ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
๋ฐฑ์—”๋“œ๋กœ ์š”์ฒญ์„ ๋ณด๋ƒˆ๋Š”๋ฐ ๋ฐฑ์—”๋“œ์—์„œ ์‘๋‹ต์„ ์ฃผ๊ธฐ๋„ ์ „์— data์— ๋‹ด์•„ ๋ฒ„๋ ธ๊ธฐ ๋•Œ๋ฌธ์— '๋ญ”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ฃผ๊ฒ ๋‹ค'๋Š” ์•ฝ์†(Promise)๋งŒ ๋ฐ›๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

์ด๋Ÿฐ ๋น„๋™๊ธฐ ์ž‘์—…๋“ค์„ ๋™๊ธฐ๋กœ ๋ฐ”๊ฟ”์ฃผ๋Š” ๋ช…๋ น์–ด๊ฐ€ ์žˆ๋‹ค.
๋ฐ”๋กœ async ์™€ await ์ด๋‹ค.
์ด๊ฒƒ์„ ํ•œ๋ฒˆ ์‚ฌ์šฉํ•ด๋ณด์ž.

์ฝ”๋“œ๊ฐ€ ํ•œ ์ค„์”ฉ ์‹คํ–‰๋˜๋ฉด์„œ await๋ฅผ ๋งŒ๋‚˜๋ฉด ๊ฒฐ๊ณผ๋ฅผ ๋ฐ›์„ ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฐ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ await๋ฅผ ๋ถ™์ด๊ธฐ ์œ„ํ•ด์„œ๋Š” async๋ฅผ ๊ฐ™์ด ๋ถ™์—ฌ์ค˜์•ผ ํ•œ๋‹ค!
๋งŒ์•ฝ async๋ฅผ ๋นผ๋จน๊ณ  await๋งŒ ์“ฐ๊ฒŒ ๋˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋‚˜๊ฒŒ ๋œ๋‹ค.


3. Hoisting (const, let, var / arrow function)

- const, let, arrow function ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ ์ด์œ 

๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ ์—ˆ๋Š”๋ฐ๋„ ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š๋Š”๋‹ค.
์•„์ง child๊ฐ€ ์—†๋Š”๋ฐ๋„ ์—๋Ÿฌ๊ฐ€ ์•„๋‹Œ undefined๊ฐ€ ๋‚˜์˜จ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด var ๋Œ€์‹  const๋‚˜ let์„ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋–จ๊นŒ.

child2,3์ด ์ •์˜๋˜์ง€ ์•Š์•˜๋‹ค๋Š” ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค.
์ด๋ ‡๊ฒŒ ์—๋Ÿฌ๊ฐ€ ๋‚˜์•ผ ์ •์ƒ์ด๋‹ค.

๊ทธ๋Ÿผ ์™œ var๋ฅผ ์“ฐ๋ฉด ์—๋Ÿฌ๊ฐ€ ๋‚˜์ง€ ์•Š์„๊นŒ?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ•ญ์ƒ var ๋ฅผ ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด๋Ÿฐ์‹์œผ๋กœ ์—๋Ÿฌ๊ฐ€ ๋งŽ์ด ๋‚˜๋ฉด์„œ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ ์ž ์ดํ›„์— const, let์ด ๋‚˜์˜ค๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.
๊ทธ๋ ‡์ง€๋งŒ var๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•ด๋„ ์ž‘๋™์ด ์ž˜ ๋œ๋‹ค๋Š” ๋ฌธ์ œ?!๊ฐ€ ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด์ œ๋Š” var๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  const์™€ let์„ ์‚ฌ์šฉํ•œ๋‹ค๊ณ  ํ•œ๋‹ค. (์ด ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๋ณด๋‹ค ์–ด๋ ต๋‹ค๋Š” ํ‰์ด ๋‚˜์˜ค๋Š” ๊ฒƒ ๊ฐ™๋‹ค.)

์ด๋Š” ํ˜ธ์ด์ŠคํŒ… ์ด๋ผ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง•์ด๋‹ค. (hoisting - ๋Œ์–ด์˜ฌ๋ฆฌ๋‹ค)
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์ด์ „์— ์–ด๋–ค ๋ณ€์ˆ˜๋“ค์ด ์žˆ๋Š”์ง€ ์ฒดํฌ๋ฅผ ํ•œ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ var ๊ฐ€ ์žˆ๋‹ค๋ฉด ์šฐ์„ ์ ์œผ๋กœ ์•„๋ž˜์ฒ˜๋Ÿผ undefined๋กœ ์šฐ์„  ์„ ์–ธ์„ ํ•œ ๋’ค
์ฝ”๋“œ๋ฅผ ์‹คํ–‰์„ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์—๋Ÿฌ๊ฐ€ ์•„๋‹ˆ๋ผ undefined๊ฐ€ ๋œจ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด const๋‚˜ let์€ ํ˜ธ์ด์ŠคํŒ…์ด ์•ˆ๋ ๊นŒ?

๋œ๋‹ค.
ํ˜ธ์ด์ŠคํŒ…์ด๋ผ๋Š” ๋‹จ์–ด๋Š” ๋Œ์–ด์˜ฌ๋ฆฐ๋‹ค๋Š” ๋œป์ด๋‹ค.
const, let๋„ ํ˜ธ์ด์ŠคํŒ… ์ž์ฒด๋Š” ๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ฝ˜์†”์— ์ฐํžˆ์ง€ ์•Š๋Š” ์ด์œ ๋Š” ์‹ค์ œ๋กœ undefined๊ฐ€ ๋ณ€์ˆ˜์— ํ• ๋‹น์ด ๋˜๊ธฐ ์ „๊นŒ์ง„ ์ ‘๊ทผ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋˜๋Š” ์ง€์—ญ, TDZ Temperal Dead Zone ๋•Œ๋ฌธ์ด๋‹ค.


๋‘๋ฒˆ์งธ๋กœ ํ•จ์ˆ˜์—์„œ๋„ ๋น„์Šทํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.

ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ ๋‚˜์„œ ์‹คํ–‰์‹œ์ผœ์•ผ ํ•˜๋Š”๋ฐ ๋จผ์ € ์‹คํ–‰์„ ์‹œํ‚จ ๋’ค ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค. ๋ง๋„ ์•ˆ๋˜๋Š” ์ฝ”๋“œ์ž„์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ž˜๋งŒ ์‹คํ–‰๋œ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด const๋ฅผ ์‚ฌ์šฉํ•œ ํ•จ์ˆ˜ ํ‘œํ˜„์‹์€ ์–ด๋–จ๊นŒ.

์—„๊ฒฉํ•˜๊ฒŒ ์‹คํ–‰ ์ˆœ์„œ๋ฅผ ์žก์•„์ฃผ๊ณ  ์žˆ๋‹ค.
ํ‘œํ˜„์‹ ๋ง๊ณ  ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๊ฒฐ๊ณผ๋Š” ๊ฐ™๋‹ค.

๋•Œ๋ฌธ์— ๊ทธ๋ƒฅ ํ•จ์ˆ˜๋ณด๋‹ค๋Š” ์˜ค๋ฅ˜๋„ ์žก์•„์ฃผ๊ณ  ๊ฐ„๊ฒฐํ•œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.


๋˜ํ•œ var ์™€ ์ผ๋ฐ˜ ํ•จ์ˆ˜๋Š” ์ค‘๋ณต ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

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


์ด ๋‚ด์šฉ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ rest-API๋ฅผ getํ•ด์˜ค๋Š” ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค. ๋ฌผ๋ก  ๋ฐ์ดํ„ฐ๋ฅผ async / await ์„ ์ด์šฉํ•ด ๋น„๋™๊ธฐ ๋ฐฉ์‹์ด ์•„๋‹Œ ๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•ด์„œ ๋ฐ›์•„์™€์•ผ ํ•œ๋‹ค.


4. Apollo-Client / Mutation

_app.js : ์„ธํŒ…ํ•˜๋Š” ํŒŒ์ผ

์–ด๋–ค ํŒŒ์ผ์— ์ ‘์†ํ•ด๋„ _app.js๊ฐ€ 1๋ฒˆ์œผ๋กœ ์‹คํ–‰๋œ ๋‹ค์Œ์— ์›ํ•˜๋Š” ํŒŒ์ผ์ด ์‹คํ–‰๋œ๋‹ค. _app.js์— ์„ธํŒ…ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ์–ด๋””์—์„œ๋„ Apollo-Client๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. ๊ทธ๋Ÿฌ๋ฏ€๋กœ apollo-client๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— _app.js์— ์„ธํŒ…์„ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

_app.js ์— Apollo-client ์„ค์ •ํ•˜๊ธฐ

  1. apollo-client๋ฅผ ์„ค์น˜ํ•ด์ค€๋‹ค.

  2. ApolloClient๋ฅผ import ํ•ด์ค€๋‹ค.
    import {ApolloClient} from '@apollo/client'

  3. ์ƒˆ ApolloClient๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.

  4. ์„ธํŒ…ํ•ด์ฃผ๊ณ  client๋ผ๋Š” ๋ณ€์ˆ˜์— ๋‹ด์•„์ค€๋‹ค.

  const client = new ApolloClient({
      uri: "http://backend.co.kr/graphql" ,
      cache: new InMemoryCache()
  })
  uri์—๋Š” playground ์ฃผ์†Œ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค. 
  InMemoryCache๋„ import ํ•ด์ค€๋‹ค. 
  cache๋Š” ์–ด๋””์— ์ €์žฅํ• ๊ฑด๋ฐ? ๋ผ๋Š” ๋ง์ด๋‹ค.
  InMemoryCache์— ์ €์žฅํ• ๊ฑฐ์•ผ. ๋ผ๋Š” ๋ง์ž„.
  ์ปดํ“จํ„ฐ ๊ป๋‹ค ํ‚ค๋ฉด ๋‚ ์•„๊ฐ€๋Š” Memory์— ์ €์žฅํ•œ๋‹ค.
  1. Apolloprovider ๋กœ Component๋ฅผ ๊ฐ์‹ธ์ค€๋‹ค. (import ํ•ด์ค€๋‹ค.)

  2. ์„ค์ •๋‚ด์šฉ( client) ๋ฅผ ๋„˜๊ฒจ์ค€๋‹ค.

    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>

Mutation

apollo-client๋„ axios์ฒ˜๋Ÿผ ์š”์ฒญํ•œ๋‹ค.
useMutation()์ด๋ผ๋Š” Hook์„ ์‚ฌ์šฉํ•ด์„œ ์š”์ฒญํ•˜๋ฉด ๋œ๋‹ค.
๋‹ค์Œ์˜ ๊ณผ์ •๋Œ€๋กœ ํ•ด๋ณด์ž.

  1. Playground์˜ ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ ๋ณ€์ˆ˜์— ๋‹ด๊ธฐ
const CREATE_BOARD = gql`
	mutation{
    	createBoard(writer:'Amy', title:'This is title.', contents:'content!!!!'){
        	_id
            number
            message
        }
	}

`
  1. ์‹คํ–‰ํ•  ํ•จ์ˆ˜ setting ํ•˜๊ธฐ
  • Playground์˜ ๋‚ด์šฉ์„ ๋‹ด์€ ๋ณ€์ˆ˜๋ฅผ ๋“ฑ๋ก์‹œ์ผœ์ฃผ๋ฉด ๋œ๋‹ค.
const [์‹คํ–‰ํ•จ์ˆ˜] = useMutation(Playground ๋‚ด์šฉ์„ ๋‹ด์€ ๋ณ€์ˆ˜)
  1. API ์‹คํ–‰์‹œํ‚ค๊ธฐ

์‹คํ–‰ํ•จ์ˆ˜() ์ด๋ ‡๊ฒŒ ์›ํ•˜๋Š” API๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.


์ „์ฒด ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์ด๋ ‡๋‹ค.


graphql-api ๋ฐฉ์‹๊ณผ rest-api ๋ฐฉ์‹ ์ฐจ์ด



์œ„์˜ ๋ฐฉ๋ฒ•์€ ํ•˜๋“œ์ฝ”๋”ฉ๋œ ๊ฐ’์œผ๋กœ ๋งค๋ฒˆ ๊ฐ™์€ ๊ณ ์ •๋œ ๊ฐ’๋งŒ ์š”์ฒญํ•œ๋‹ค.
ํ•˜๋“œ ์ฝ”๋”ฉ์ด ์•„๋‹ˆ๋ผ ์‹คํ–‰ํ•  ๋•Œ๋งˆ๋‹ค ๊ฐ’์„ ๋„ฃ์–ด์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ณด์ž.

์šฐ์„  input์„ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ๊ฐ’์„ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.

onChange๋กœ ๊ทธ ๊ฐ’์„ ๊ฐ€์ ธ์™€์„œ useState๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ž…๋ ฅํ•œ ๊ฐ’์„ ๋ณ€์ˆ˜์— ๋‹ด์•„์ฃผ๋„๋ก ํ•œ๋‹ค. ๋‹ด์€ ๋ณ€์ˆ˜๋ฅผ API๋ฅผ ์š”์ฒญํ•  ๋•Œ variables ๊ฐ’์œผ๋กœ ๋„ฃ์–ด์ค€๋‹ค.

์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑํ•  ๋•Œ๋งˆ๋‹ค ๋‹ค๋ฅธ ๋™์ ์ธ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก Playground์˜ Type ๋ถ€๋ถ„์„ ์ฐธ๊ณ ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•ด์ค€๋‹ค.

์–ธ๋œป ๋ณด๋ฉด ๊ฐ™์€ ๋‚ด์šฉ์„ ๋‘๋ฒˆ์”ฉ์ด๋‚˜ ์ ์–ด์ค€๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Š” mutation์„ ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์–ด์„œ ์—ฌ๋Ÿฌ API๋ฅผ ํ•œ๋ฒˆ์— ์š”์ฒญํ•˜๊ธฐ ์œ„ํ•œ ๋ฌถ์Œ ๋ฐฉ์‹์ด๋‹ค. ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฐ์ดํ„ฐ๋ฅผ ํ•œ๋ฒˆ์— ๋ชจ๋‘ ์š”์ฒญํ•  ์ˆ˜ ์žˆ์–ด์„œ ์„œ๋ฒ„ ๋น„์šฉ ์ ˆ๊ฐ ํšจ๊ณผ๋„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


๋‹ค์Œ์€ ์ „์ฒด ์ฝ”๋“œ์ด๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

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