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

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

TIL

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

๋ชฉ์ฐจ

  • ๋ฌด์—‡์ด ํผ์„ ๋ณต์žกํ•˜๊ฒŒ ํ•˜๋Š”๊ฐ€
  • ์–‘์‹ ์ œ์ถœ ์ฒ˜๋ฆฌ ๋ฐ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

โœง ๋ฌด์—‡์ด ํผ์„ ๋ณต์žกํ•˜๊ฒŒ ํ•˜๋Š”๊ฐ€

  • ์–ธ๋œป ๋ณด๊ธฐ์— form ์€ ๋‹จ์ˆœํ•ด ๋ณด์ด์ง€๋งŒ ์‹ค์ƒ์€ ๊ทธ๋ ‡์ง€ ์•Š๋‹ค. ์ ์–ด๋„ ๊ฐœ๋ฐœ์ž์˜ ์‹œ๊ฐ์—์„œ ๋ฐ”๋ผ๋ณธ๋‹ค๋ฉด ๋ง์ด๋‹ค. ํผ๊ณผ input ๊ฐ’์€ ๋‹ค์–‘ํ•œ ์ƒํƒœ(state)๋ฅผ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๊ธฐ์— ์ƒ๋‹นํžˆ ๋ณต์žกํ•œ ๊ตฌ์กฐ๋ฅผ ๋„๊ณ  ์žˆ๋‹ค.

ํผ์ด ๊ณ ๋ คํ•ด์•ผ๋งŒ ํ•˜๋Š” ์ˆ˜ ๋งŽ์€ ๊ฐ€๋Šฅ์„ฑ์— ๋Œ€ํ•˜์—ฌ

  • ํ•˜๋‚˜ ์ด์ƒ์˜ ์ž…๋ ฅ ๊ฐ’์ด ๋ชจ๋‘ ์œ ํšจํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๊ณ , ๋ชจ๋‘ ์œ ํšจํ•  ์ˆ˜ ์žˆ๋‹ค. ๋˜ ์„œ๋ฒ„๋กœ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๋ณด๋‚ธ ๋’ค์— ํŠน์ • ๊ฐ’์ด ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ์ง€ ํ™•์ธํ•ด์•ผ ํ•˜๋Š” ๋น„๋™๊ธฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ด์šฉํ•ด์•ผ ํ•  ๋•Œ ์ƒํƒœ(state)๋ฅผ ์•Œ ์ˆ˜ ์—†์„ ๋•Œ๋„ ์žˆ๋‹ค. (ex. ์ด๋ฉ”์ผ ์ฃผ์†Œ๊ฐ€ ์œ ํšจํ•œ์ง€ ํ™•์ธํ•ด์•ผ ํ•  ๋•Œ) ๋”ฐ๋ผ์„œ ํผ์€ ์šฐ๋ฆฌ๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ๋ณต์žกํ•  ์ˆ˜ ์žˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ž ๊น ์ƒ๊ฐํ•ด๋ณด๊ธฐ๋งŒ ํ•œ ๊ฐ€๋Šฅ์„ฑ๋งŒ ํ•ด๋„ ๋ฒŒ์จ ๋‘๊ฐ€์ง€ ์ƒํƒœ(state)์ธ๋ฐ, ์‹ค์ œ๋กœ๋Š” ํ•˜๋‚˜์˜ ํผ์ด ์œ ํšจํ•œ์ง€ ์•„๋‹Œ์ง€๋งŒ ๋”ฐ์ง€๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํผ์— ์žˆ๋Š” '๋ชจ๋“  ์ž…๋ ฅ ๊ฐ’'์— ๋Œ€ํ•ด์„œ๋„ ์œ ํšจ์„ฑ์„ ๊ณ ๋ คํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ด๋ณด๋ผ. ๊ทธ๋ฆฌ๊ณ  ๊ฐ๊ฐ์˜ ์ž…๋ ฅ ๊ฐ’์˜ ์ƒํƒœ(state)๊ฐ€ ๋ชจ์—ฌ์„œ ์ „์ฒด ํผ์˜ ์ƒํƒœ(state)๋ฅผ ๊ฒฐ์ •ํ•ด์•ผ๋งŒ ํ•œ๋‹ค.

ํผ๊ณผ ์ž…๋ ฅ ๊ฐ’์ด ์œ ํšจํ•˜์ง€ ์•Š์„ ๋•Œ์™€ ์œ ํšจํ•  ๋•Œ

  • ํผ๊ณผ ํผ ๋‚ด๋ถ€์˜ input(์ž…๋ ฅ) ๊ฐ’์ด ์œ ํšจํ•˜์ง€ ์•Š์„ ๋•Œ ํŠน์ •ํ•œ ์ž…๋ ฅ ๊ฐ’์— ๋Œ€ํ•ด์„œ ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ณ  ๋ฌธ์ œ๊ฐ€ ๋˜๋Š” ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ•์กฐํ•ด์•ผ ํ•œ๋‹ค. ๋˜ ํ•˜๋‚˜ ์ด์ƒ์˜ ์ž…๋ ฅ ๊ฐ’์ด ์œ ํšจํ•˜์ง€ ์•Š๋‹ค๋ฉด, ์ด ์ž…๋ ฅ ๊ฐ’์ด ์ œ์ถœ๋˜๊ฑฐ๋‚˜ ์ €์žฅ๋˜์ง€ ์•Š๋„๋ก ํ•ด์•ผ๋งŒ ํ•œ๋‹ค. ๋ฐ˜๋ฉด ํผ๊ณผ ํผ ๋‚ด๋ถ€์˜ input(์ž…๋ ฅ) ๊ฐ’์ด ์œ ํšจํ•˜๋‹ค๋ฉด ์ด ์ž…๋ ฅ ๊ฐ’์ด ํ™•์‹คํ•˜๊ฒŒ ์ œ์ถœ๋˜๊ณ  ์ €์žฅ๋˜๋„๋ก ์ฒ˜๋ฆฌํ•ด ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ฑฐ๊ธฐ๋‹ค ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ณ  ์œ ํšจํ•˜์ง€ ์•Š์€ ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ•์กฐํ•˜๋Š” ๋ถ€๋ถ„ ๋˜ํ•œ ์ฒ˜๋ฆฌํ•ด์ฃผ์–ด์•ผ ํ•˜๋Š”๋ฐ, ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ์–ธ์ œ ํ™•์ธํ•ด์•ผ ํ• ์ง€๋ฅผ ๊ณ ๋ คํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ›จ์”ฌ ๋” ๋ณต์žกํ•ด์งˆ ๊ฒƒ์ด๋‹ค.

์–ด๋Š ์‹œ๊ธฐ์— ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ํ™•์ธํ•ด์•ผ ํ• ๊นŒ?

  • ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ์–ธ์ œ ํ™•์ธํ•ด์•ผ ํ• ๊นŒ? ์‹œ๊ธฐ๋Š” ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€๋กœ ๋‚˜๋ˆ ๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’ ํ™•์ธ 1. ํผ์ด ์™„์ „ํžˆ ์ œ์ถœ ๋˜์—ˆ์„ ๋•Œ

  • ๋จผ์ € ํผ์ด ์™„์ „ํ•˜๊ฒŒ ์ œ์ถœ๋˜์—ˆ์„ ๋•Œ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

  • ์žฅ์  : ํผ์ด ์™„์ „ํ•˜๊ฒŒ ์ œ์ถœ๋œ ๋’ค์— ์œ ํšจ์„ฑ ๊ฒ€์ฆ์„ ํ•  ๋•Œ์—๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์œ ํšจํ•œ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‹ค์‹œ ๋งํ•˜์ž๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ฉ”์ผ ์ž…๋ ฅ ์นธ์„ ์ž…๋ ฅํ•˜๋Š” ์ค‘์— ์™„์ „ํžˆ ์ž…๋ ฅํ•˜์ง€๋„ ์•Š์•˜๋Š”๋ฐ ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋ฅผ ๋ฐ›์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ์„ ๋งˆ์น  ๋•Œ๊นŒ์ง€ ์ถฉ๋ถ„ํžˆ ๊ธฐ๋‹ค๋ฆฐ ๋’ค์— ํผ์„ ์ œ์ถœ ํ•˜๊ณ  ์—๋Ÿฌ๋ฅผ ๋ณด์—ฌ์ฃผ๊ฒŒ ๋˜๋ฏ€๋กœ ๋ถˆํ•„์š”ํ•œ ๊ฒฝ๊ณ ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์–ด์„œ ๊ฝค ๊ดœ์ฐฎ์€ ๋ฐฉ๋ฒ•์ด๋ผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ๋‹จ์  : ๋‹จ์ ์€ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ์ž…๋ ฅ ํ›„ ํผ์„ ์ œ์ถœํ•˜๊ณ  ๋‚œ ๋’ค์— ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์„ ์•Œ๋ ค์ฃผ๊ฒŒ ๋œ๋‹ค๋ฉด ์‚ฌ์šฉ์ž๋Š” ์ž˜๋ชป๋œ ์ž…๋ ฅ ๊ฐ’์ด ์žˆ๋Š” ์‹œ๊ธฐ๋กœ ๋Œ์•„๊ฐ€์„œ ๊ฐ’์„ ๋‹ค์‹œ ์ž…๋ ฅํ•ด์•ผ๋งŒ ํ•œ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์ด๊ฒƒ์€ ์—„์ฒญ๋‚œ ๋ฌธ์ œ๋Š” ์•„๋‹ˆ์ง€๋งŒ ์ตœ์ข…์ ์œผ๋กœ ์ œ๊ณตํ•˜๊ณ ์ž ํ•˜๋Š” ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ๋˜ํ•œ ์•„๋‹ ๊ฒƒ์ด๋‹ค.

์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’ ํ™•์ธ 2. ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ณ , input ์š”์†Œ์—์„œ ํฌ์ปค์Šค ์•„์›ƒ ๋˜์—ˆ์„ ๋•Œ

  • ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ณ  ๋‚œ ๋’ค์— input ์š”์†Œ์—์„œ ํฌ์ปค์Šค๋ฅผ ์žƒ์—ˆ์„ ๋•Œ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฌด์—‡์„ ์ž…๋ ฅํ–ˆ๋Š”์ง€๋ฅผ ํ™•์ธํ•˜๊ณ  ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

  • ์žฅ์  : input ์š”์†Œ์—์„œ ํฌ์ปค์Šค๋ฅผ ์žƒ์—ˆ์„ ๋•Œ ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•˜๋Š” ๊ฒฝ์šฐ, ์ „์ฒด ํผ์ด ์ œ์ถœ๋˜๊ณ  ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ด๊ธฐ ์ „์— ์‚ฌ์šฉ์ž๊ฐ€ ์œ ํšจํ•œ ๊ฐ’์„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋‹ค. ํ˜น์€ ์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ • ์ž…๋ ฅ์„ ๋๋‚ด์ž๋งˆ์ž ๋ฐ”๋กœ ๊ทธ ์‹œ์ ์— ๋ฐ”๋กœ ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ์ „์ฒด ํผ์ด ์ œ์ถœ๋˜๊ธฐ ์ „๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํ•˜๋‚˜์˜ ํŠน์ •ํ•œ ์ž…๋ ฅ์„ ๋งˆ์น  ๋•Œ ๊นŒ์ง€๋งŒ ๊ธฐ๋‹ค๋ฆฌ๋Š” ๊ฒƒ์ด๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ ๊ฐ’์„ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ๋งค์šฐ ์œ ์šฉํ•˜๋‹ค.

  • ๋‹จ์  : input ์š”์†Œ์—์„œ ํฌ์ปค์Šค๋ฅผ ์žƒ์—ˆ์„ ๋•Œ ์ž…๋ ฅ ๊ฐ’์˜ ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•˜๋Š” ๊ฒฝ์šฐ, ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ ์ „์— ์œ ํšจํ•˜์ง€ ์•Š์€ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ณ  ๋‚˜์„œ ๊ณ ์น˜๋Š” ์ค‘์—๋„ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์ด ์œ ํšจํ•œ์ง€ ์•„๋‹Œ์ง€๋ฅผ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์•Œ๋ ค์ค„ ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’ ํ™•์ธ 3. ์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์น  ๋•Œ๋งˆ๋‹ค ๊ฒ€์ฆํ•˜๋Š” ๋ฐฉ๋ฒ•.

  • ์‚ฌ์šฉ์ž๊ฐ€ input ์š”์†Œ ์•ˆ์—์„œ ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์น  ๋•Œ๋งˆ๋‹ค ๊ฒ€์ฆํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‚˜ input ์š”์†Œ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

  • ์žฅ์  : input ์š”์†Œ ์•ˆ์—์„œ ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์น  ๋•Œ๋งˆ๋‹ค ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์˜ ์œ ํšจ์„ฑ์— ๋Œ€ํ•ด ๋ฐ”๋กœ ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๋Š” ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์— ์‹ค์‹œ๊ฐ„์œผ๋กœ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์ด ์œ ํšจํ•œ์ง€ ์•„๋‹Œ์ง€๋ฅผ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ๋‹ค.

  • ๋‹จ์  : input ์š”์†Œ ์•ˆ์—์„œ ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์น  ๋•Œ๋งˆ๋‹ค ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์˜ ์œ ํšจ์„ฑ์— ๋Œ€ํ•ด ๋ฐ”๋กœ ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๋Š” ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž๊ฐ€ ์œ ํšจํ•œ ๊ฐ’์„ ์ž…๋ ฅํ•˜๊ธฐ๋„ ์ „์— ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋ฅผ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค. ์ฆ‰, ํ‚ค๋ฅผ ํ•œ ๋ฒˆ์”ฉ ์น  ๋•Œ๋งˆ๋‹ค ์œ ํšจ์„ฑ์„ ๊ฒ€์‚ฌํ•œ๋‹ค๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ํ•ด๋‹น ํผ์— ์•„๋ฌด๋Ÿฐ ๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ์ƒํƒœ์ž„์—๋„ ๊ทธ ์ƒํƒœ์—์„œ๋Š” ๋ชจ๋“  ๊ฐ’์ด ์œ ํšจํ•˜์ง€ ์•Š์€๋ฐ๋‹ค๊ฐ€ ์‚ฌ์šฉ์ž๋Š” ์•„์ง ์ƒˆ๋กœ์šด ๊ฐ’์„ ์ž…๋ ฅํ•  ๊ธฐํšŒ์กฐ์ฐจ ๋ฐ›์ง€ ๋ชปํ–ˆ์œผ๋ฏ€๋กœ ์ˆ˜ ๋งŽ์€ ์—๋Ÿฌ๋“ค์„ ๋งˆ์ฃผํ•˜๊ฒŒ ๋œ๋‹ค.

์ •๋ฆฌ

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


โœง ์–‘์‹ ์ œ์ถœ ์ฒ˜๋ฆฌ ๋ฐ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

  • ๊ฐ„๋‹จํ•œ ์ž…๋ ฅ ๊ฐ’์„ ๋ฐ›๋Š” ํผ ์–‘์‹์ด ์žˆ๋Š” SimpleInput ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ, ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ์„ ๋ฐ›๊ณ  ๊ทธ ์ž…๋ ฅ ๊ฐ’์— ๋Œ€ํ•œ ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•˜์—ฌ ์—๋Ÿฌ ๋ฉ”์„ธ์ง€๋ฅผ ๋„์›Œ๋ณผ ๊ฒƒ์ด๋‹ค.
const SimpleInput = (props) => {
  return (
    <form>
      <div className="form-control">
        <label htmlFor="name">Your Name</label>
        <input type="text" id="name" />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

  • ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์—๋Š” ๋‘๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ๋กœ useState๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ชจ๋“  ํ‚ค ์ž…๋ ฅ ๋งˆ๋‹ค ํ™•์ธํ•˜๊ณ  ํ•ด๋‹น ์ž…๋ ฅ ๊ฐ’์„ ์–ด๋–ค ์ƒํƒœ(state) ๋ณ€์ˆ˜์— ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค. ๋‘ ๋ฒˆ์งธ๋กœ๋Š” useRef๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‚ฌ์šฉ์ž๊ฐ€ ๊ฐ’์„ ๋ชจ๋‘ ์ž…๋ ฅํ–ˆ์„ ๋•Œ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ 1. useState

  • ๋จผ์ €, useState๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.
import { useState } from "react";

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState("");
  ...
}
  • useState๋ฅผ import ํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ํ˜ธ์ถœํ•œ๋‹ค. ํ•ด๋‹น ์ƒํƒœ(state)์˜ ์ด๋ฆ„์€ enteredName์œผ๋กœ ์ง€์ •ํ–ˆ๋‹ค. ํ•ด๋‹น ์ƒํƒœ๋Š” ๋ฌธ์ž์—ด๋กœ ๋ฐ›์„ ๊ฒƒ์ด๊ธฐ์— ์ดˆ๊ธฐ๊ฐ’์„ ""๋กœ ์„ค์ •ํ•œ๋‹ค.
const nameInputChangeHandler = (event) => {
  setEnteredName(event.target.value);
};
  • ์ด์ œ enteredName ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•ด์ค„ ์ˆ˜ ์žˆ๋„๋ก nameInputChangeHandler ์ด๋ฒคํŠธ ํŠธ๋ฆฌ๊ฑฐ ํ•จ์ˆ˜๋ฅผ ๋ฐ›๊ณ , ์ƒํƒœ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜(setEnteredName)์— target.value ๊ฐ’์œผ๋กœ ๋ฐ›์•„์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

    nameInputChangeHandler ํ•จ์ˆ˜์˜ event ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” event ๊ฐ์ฒด๋กœ ๋ฐ›๋Š” ๊ฒƒ์ด๋‹ค. ์ด๊ฒƒ์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜๋Š” ๋ฐฉ์‹์ž„์„ ๊ธฐ์–ตํ•˜์ž. nameInputChangeHandler ํ•จ์ˆ˜๋ฅผ input ์š”์†Œ์˜ onChange์— ์—ฐ๊ฒฐํ•ด์ฃผ๊ณ  ๋‚˜๋ฉด ์ž๋™์ ์œผ๋กœ ์ด๋ฒคํŠธ๋ฅผ ์„ค๋ช…ํ•˜๋Š” event ๊ฐ์ฒด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ด event ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด์„œ ์ž…๋ ฅ๋œ ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ์ฆ‰, event.target.value ๋Š” ๋ฆฌ์•กํŠธ๊ฐ€ ์•„๋‹Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ด๋ฉฐ ์—ฐ๊ฒฐ๋œ input ์š”์†Œ์— ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด event.taget ์œผ๋กœใ„น ์ ‘๊ทผํ•˜์—ฌ value ๊ฐ’์„ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค.

<input type="text" id="name" onChange={nameInputChangeHandler} />
  • ๊ทธ๋ฆฌ๊ณ  ์ž…๋ ฅ ๊ฐ’์„ ๋ฐ›์•„์˜จ input ์š”์†Œ์— onChange ์ด๋ฒคํŠธ๋กœ nameInputChangeHandler ํ•จ์ˆ˜๋ฅผ ํฌ์ธํ„ฐ ํ•ด์ค€๋‹ค.
const formSubmitssionHandler = (event) => {
  event.preventDefault();
};
  • ๋‹ค์Œ์œผ๋กœ, ๋‘ ๋ฒˆ์งธ ํ•จ์ˆ˜์ธ formSubmitssionHandler ์„ ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” ํผ์ด ์ œ์ถœ๋  ๋•Œ ์ž‘๋™ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. ์ด ํ•จ์ˆ˜๋„ ์ด๋ฒคํŠธ ๊ฐ์ฒด๋กœ ๋งŒ๋“ค ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ event ๊ฐ์ฒด๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์ž‘์„ฑํ•ด์ค€๋‹ค.
<form onSubmit={formSubmitssionHandler}>...</form>
  • ๊ทธ๋ฆฌ๊ณ  form ์š”์†Œ์— onSubmit ์ด๋ฒคํŠธ๋กœ ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์—ฐ๊ฒฐํ•ด์ค€๋‹ค.

ํผ์—์„œ event.preventDafult() ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•˜๋Š” ์ด์œ 

const formSubmitssionHandler = (event) => {
  event.preventDefault();
};
  • form ์–‘์‹์„ ์ œ์ถœ(onSubmit)ํ•˜๋Š” ํ•จ์ˆ˜์—์„œ event.preventDafult()๋ฅผ ์™œ ์ถ”๊ฐ€ํ•ด์•ผ๋งŒ ํ•˜๋Š” ๊ฑธ๊นŒ? ์™œ๋ƒํ•˜๋ฉด ์—ฌ๊ธฐ์„œ๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜๋Š” ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค๋ฃจ๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €๋Š” ํผ ์•ˆ์— ์žˆ๋Š” ๋ฒ„ํŠผ์„ ํ†ตํ•ด์„œ ํผ ์–‘์‹์„ ์ œ์ถœ(onSubmit)ํ•˜๊ฒŒ ๋˜๋ฉด, ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์„œ๋ฒ„๋กœ HTTP ์š”์ฒญ์„ ๋ณด๋‚ด๊ฒŒ ๋œ๋‹ค. ์ด ๊ณผ์ •์€ ๋ชจ๋‘ ์ž๋™์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง€๋Š” ๊ฒƒ์ด๊ธฐ์— ์‹ค์ œ๋กœ ํ˜„ ์‹œ์ ์—์„œ ์šฐ๋ฆฌ์˜ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ๋Š” HTTP ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•  ์„œ๋ฒ„๊ฐ€ ์—†๋Š” ์ƒํƒœ์ด๊ณ  HTML๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋งŒ ์ „์†กํ•˜๋Š” ์ •์  ์„œ๋ฒ„๋งŒ ์žˆ๋Š” ์ƒํƒœ์ด๋ฉด ์ด ์ž๋™ํ™” ๊ณผ์ •์€ ํฐ ๋ฌธ์ œ๊ฐ€ ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ด ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ๋˜๊ธฐ ์ „์— event.preventDafult()๋ฅผ ํ†ตํ•ด์„œ ์ž๋™์ ์œผ๋กœ ์š”์ฒญ์ด ๋ณด๋‚ด์ง€์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•œ๋‹ค.

  • ๊ฒฐ๋ก ์ ์œผ๋กœ, event.preventDafult()๊ฐ€ ํ•„์š”ํ•œ ์ด์œ ๋Š” ์ด๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ํผ์„ ์ œ์ถœํ•˜๊ฒŒ ๋˜๋ฉด ์ž๋™์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €์—์„œ HTTP ์š”์ฒญ์ด ๋ณด๋‚ด๊ฒŒ ๋˜๋ฉด์„œ ๊ฒฐ๊ตญ ํŽ˜์ด์ง€๊ฐ€ ์ƒˆ๋กœ๊ณ ์นจ ๋  ๊ฒƒ์ด๊ณ , ์ด๋Š” ๋ฆฌ์•กํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ „๋ถ€ ์žฌ์‹œ์ž‘๋œ๋‹ค๋Š” ๊ฒƒ์— ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์žฌ์‹œ์ž‘ ๋˜๋ฉด์„œ ์šฐ๋ฆฌ๊ฐ€ ๋„ฃ์–ด๋‘” ์ƒํƒœ(state)๋“ค์€ ์ดˆ๊ธฐํ™”๋  ๊ฒƒ์ด๊ณ , ์›ํ•˜๋Š” ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ํ™•๋ฅ ์ด ๋†’๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ํผ ์–‘์‹์„ ์ œ์ถœํ•  ๋•Œ์—๋Š” event.preventDafult()๋ฅผ ํ†ตํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋ณธ ๊ณผ์ •์ธ HTTP ์š”์ฒญ์„ ๋ณด๋‚ด์ง€ ์•Š๋„๋ก ๋ช…๋ นํ•ด์ค˜์•ผ ํ•œ๋‹ค.

const formSubmitssionHandler = (event) => {
  event.preventDefault();

  console.log(enteredName);
};
  • ์ €์žฅํ•˜๊ณ , ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ํผ์„ ์ œ์ถœํ•ด๋ณด๋ฉด

  • ๋‚ด๊ฐ€ input ์š”์†Œ์— ์ž…๋ ฅํ•œ ๊ฐ’์ด ๊ทธ๋Œ€๋กœ ์ฝ˜์†”์— ์ถœ๋ ฅ๋˜๊ณ  ์žˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ 2. useRef

  • ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์—๋Š” input ์š”์†Œ์— ref๋ฅผ ์„ค์ •ํ•จ์œผ๋กœ์จ ํ•„์š”ํ•  ๋•Œ input ์š”์†Œ๋กœ๋ถ€ํ„ฐ ๊ฐ’์„ '์ฝ์–ด'์˜ค๋Š” ๊ฒƒ์ด๋‹ค.
import { useState, useRef } from "react";

const SimpleInput = (props) => {
  const nameInputRef = useRef();
};
  • ๋™์ผํ•˜๊ฒŒ useRef๋ฅผ import ํ•ด์˜จ ํ›„, nameInputRef๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ useRef๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.
<input
  ref={nameInputRef}
  type="text"
  id="name"
  onChange={nameInputChangeHandler}
  value={enteredName}
/>
  • ๊ฐ’์„ ์ฝ์–ด์˜ฌ input ์š”์†Œ์— refprop์„ ์ž‘์„ฑํ•˜๊ณ  nameInputRef๋ฅผ ํฌ์ธํ„ฐํ•ด์ค€๋‹ค.
const formSubmitssionHandler = (event) => {
  event.preventDefault();
  console.log("useState :", enteredName);

  const enteredValue = nameInputRef.current.value;
  console.log("useRef :", enteredValue);
};
  • ํผ์ด ์ œ์ถœ(onSubmit)๋˜๋ฉด ์ด ์ž…๋ ฅ๋œ ๊ฐ’(value)์„ nameInputRef์˜ current ์†์„ฑ์œผ๋กœ ์ ‘๊ทผํ•˜์—ฌ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ref๋Š” ํ•ญ์ƒ current ์†์„ฑ์„ ๊ฐ–๋Š” '๊ฐ์ฒด' ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฆฌ์•กํŠธ์—์„œ ref๋Š” ์–ธ์ œ๋‚˜ current ์†์„ฑ์œผ๋กœ value ๊ฐ’์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ input ์š”์†Œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด์ฒ˜๋Ÿผ ์ž‘๋™ํ•˜๋ฉฐ, input ์š”์†Œ๋Š” ํ•ญ์ƒ value ๋ผ๋Š” ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

  • ์ €์žฅํ•˜๊ณ , input ์ฐฝ์— ๋ฌด์–ธ๊ฐ€๋ฅผ ์ž…๋ ฅํ•œ ๋’ค ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ํผ ์–‘์‹์„ ์ œ์ถœํ•ด๋ณด๋ฉด

  • ์ฝ˜์†”์—์„œ ๊ฐ๊ฐ์˜ ๋ฐฉ๋ฒ•์œผ๋กœ ์ž…๋ ฅ ๊ฐ’์„ ๋ฐ›์•„์˜ค๋Š” ๊ฐ’๋“ค์ด ์ถœ๋ ฅ๋˜๊ณ  ์žˆ์Œ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ฒฐ๋ก 

  • ์‹ค์ œ๋กœ๋Š” ์•ž์„œ ์ด ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ•์€ ๋™์‹œ์— ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉฐ, ๋‘˜ ์ค‘์— ํ•˜๋‚˜๋งŒ ์„ ํƒํ•ด์„œ ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๊ฒƒ์ด๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ๋‘˜ ์ค‘์— ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ํ• ๊นŒ? ์ด๋Š” ์ž…๋ ฅ๋œ ๊ฐ’์œผ๋กœ ์–ด๋–ค ์ผ์„ ์ฒ˜๋ฆฌํ•  ๊ฒƒ์ธ์ง€์— ๋‹ฌ๋ ค์žˆ๋‹ค. ๋งŒ์•ฝ ์ž…๋ ฅ ๊ฐ’์ด ํผ์ด ์ œ์ถœ๋˜์—ˆ์„ ๋•Œ ๋”ฑ ํ•œ ๋ฒˆ๋งŒ ํ•„์š”ํ•˜๋‹ค๋ฉด ๋ชจ๋“  ํ‚ค ์ž…๋ ฅ๋งˆ๋‹ค ์ƒํƒœ(state) ๊ฐ’์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ์—” ์กฐ๊ธˆ ์ง€๋‚˜์น  ๊ฒƒ์ด๊ธฐ์— ref๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋” ๋‚˜์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค. ๋ฐ˜๋ฉด ์ฆ‰๊ฐ์ ์œผ๋กœ ์œ ํšจ์„ฑ ๊ฒ€์ฆ์„ ํ•ด์•ผ๋งŒ ํ•œ๋‹ค๋ฉด, ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ํ‚ค ์ž…๋ ฅ ๋งˆ๋‹ค ์ž…๋ ฅ ๊ฐ’์ด ํ•„์š”ํ•˜๋‹ค๋ฉด ref ๋กœ๋Š” ํ•ด๋‹น ์ž‘์—…์„ ํ•  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ƒํƒœ(state)๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒŒ ๋” ๋‚˜์„ ๊ฒƒ์ด๋‹ค. ๋˜ํ•œ ์ž…๋ ฅ๋œ ๊ฐ’์„ ์ดˆ๊ธฐํ™” ํ•  ๋•Œ๋„

ref

nameInputRef.current.value = "";

useState

setEnteredName("");
  • ์ƒํƒœ(state)๋ฅผ ์ด์šฉํ•œ๋‹ค๋ฉด ์ƒํƒœ ์—…๋ฐ์ดํŠธ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋นˆ ๋ฌธ์ž์—ด๋กœ ์ดˆ๊ธฐํ™”์‹œ์ผœ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋ฌผ๋ก  ref๋„ ์ด์™€ ๋™์ผํ•˜๊ฒŒ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์ง€๋งŒ ๋ฐ”๋žŒ์งํ•œ ๋ฐฉ๋ฒ•์€ ์•„๋‹ˆ๋‹ค. ์ง์ ‘์ ์œผ๋กœ DOM์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ์‹์ด๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ด์šฉํ•ด์„œ DOM์„ ์ง์ ‘ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์€ ์ง€์–‘ํ•ด์•ผํ•˜๋Š” ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์šฐ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ๋กœ๋งŒ DOM์„ ์กฐ์ž‘ํ•ด์•ผ ํ•˜๊ณ , ref๋ฅผ ํ†ตํ•ด์„œ ์ž…๋ ฅ ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋ฐฉ์‹์€ ๊ฒฐ์ฝ” ์ข‹์€ ๋ฐฉ๋ฒ•์ด๋ผ ํ•  ์ˆ˜ ์—†์„ ๊ฒƒ์ด๋‹ค.

โœฆ ์ถœ์ฒ˜


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

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

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