๐Ÿ‘Š๋ฆฌ์•กํŠธ ๋ถ€์‹œ๊ธฐ : ๋ฆฌ์•กํŠธ ์ดˆ๋ณด ํƒˆ์ถœํ•˜๊ธฐ

์ •ํ˜„์ˆ˜ยท2021๋…„ 2์›” 20์ผ
13
post-thumbnail

๋ฆฌ์•กํŠธ ๋ฅผ ์นœ๊ตฌ๋ž‘ ํ›„๋ฐฐ์—๊ฒŒ ๊ฐ€๋ฅด์ณ์ฃผ๋ฉด์„œ ๋‚˜๋„ ๋˜๋Œ์•„ ๋ณผ ๊ฒธ ์ •๋ฆฌ๋ฅผ ํ–ˆ์”๋‹ˆ๋‹ค. ์ •๋ง ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ์ตœ๋Œ€ํ•œ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์ •๋ฆฌ ํ•˜๋ ค๊ณ ํ–ˆ๊ณ , ์นœ๊ตฌ์™€ ํ›„๋ฐฐ๊ฐ€ ๋ณด๊ธฐ ์‰ฝ๊ฒŒ notion์— ์ •๋ฆฌ๋ฅผ ํ•ด์„œ ๋งํˆฌ๊ฐ€ ์กฐ๊ธˆ... ์ด์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ ์ˆ˜ ์ž…์žฅ ๊ธˆ์ง€๋ผ๊ณ  ํ•ด๋†จ๋Š”๋ฐ ๋‹ค๋“ค ์ฝ์œผ์‹œ๊ณ  ์ด์ƒํ•œ ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ๋ง์”€ํ•ด์ฃผ์‹œ๋ฉด ์ˆ˜์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค~!

โœ…๋ฆฌ์•กํŠธ๋Š” ์™œ ์“ฐ๋Š”๊ฑธ๊นŒ์š”

๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ

React๋Š” ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ UI๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ๋ฐ
UI๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฅผ ๋ณด์—ฌ์ค˜์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ์–ธ์ ์ด๊ณ 
์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ UI๋ฅผ ๊ตฌ์„ฑํ•˜์—ฌ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ด๊ณ  ํšจ์œจ์ ์ด๋ฉฐ
State์™€ Props๋กœ ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ์™€ ์†์„ฑ์„ ๊ด€๋ฆฌํ•˜๊ณ 
์ด๋“ค์„ Virtual DOM์„ ์‚ฌ์šฉํ•˜์—ฌ ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š”๊ตฌ๋‚˜!
https://velog.io/@skypedanny/๋ฆฌ์•กํŠธ-๊ทธ๊ฒŒ-๋ญ”๋ฐ

๋ฆฌ์•กํŠธ๋Š” ๋ทฐ๋งŒ ์ฑ…์ž„์ง! ๊ทผ๋ฐ ๊ทธ๋ ‡๋‹ค๊ณ ํ•ด์„œ ๋ณ„๊ฑฐ์—†๋Š”๊ฑด ์•„๋‹˜!
๋ผ์šฐํ„ฐ์ฒ˜๋ฆฌ, state๊ด€๋ฆฌ, API์—ฐ๊ฒฐ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์‚ฌ์šฉ, ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๋“ฑ๋“ฑ ์ƒ๊ฐํ•ด์•ผ ํ•  ๊ฒƒ์ด ํ•œ ๋‘๊ฐ€์ง€๊ฐ€ ์•„๋‹˜ ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋ฐฐ์›Œ์•ผ ํ• ๊ฒŒ ๋งŽ๋‹ค~ ์ด ๋ง

โœ…CRA ์‹œ์ž‘ํ•˜๊ธฐ

create-react-app ์‹œ์ž‘ํ•˜๊ธฐ

React๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ •๋ง ์ดˆ๊ธฐ ๊ตฌ์„ฑ ์„ค์ •์ด ์–ด๋ ค์›Œ.
webpack ์„ค์ •, babel์„ค์น˜, configํŒŒ์ผ ์„ค์ • ๋“ฑ๋“ฑ๋“ฑ.....
create-react-app์€ ์ € ์œ„์— ๊ฒƒ๋“ค์„ ์„ค์ •ํ•  ํ•„์š”์—†์ด ๊ทธ๋ƒฅ ์„ค์น˜๋งŒ ํ•˜๋ฉด ๋ฐ”๋กœ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์•„์ฃผ ์ข‹์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž„
(๋‚˜๋„ ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•  ๋•Œ ๋Œ€๋ถ€๋ถ„ ์ด๊ฑธ๋กœ ์‹œ์ž‘)

โœ…๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด์„œ

์ปดํฌ๋„ŒํŠธ๋Š” ๋ฆฌ์•กํŠธ๋ฅผ ์ด๋ฃจ๋Š”, ๋ทฐ ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ฃผ์š” ์š”์†Œ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๋“ฏ? ์ตœ์ƒ๋‹จ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ •๋ง ์ž‘์€ (์˜ˆ๋ฅผ๋“ค๋ฉด ํ•˜๋‚˜์˜ ๋ฒ„ํŠผ์„ ๋ณด์—ฌ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ)๊นŒ์ง€ ์ „๋ถ€ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ์–ด์˜ ๊ทธ๋ž˜์„œ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๋‚˜๋ˆ„๊ณ , ์–ด๋–ป๊ฒŒ ์งค ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•ด์„œ ๊ณ ๋ฏผ์„ ๋งŽ์ด ํ•˜๊ฒŒ๋จ (์™œ? ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ์•ˆ์— ๋„ˆ๋ฌด ๋งŽ์€ ๊ธฐ๋Šฅ์„ ๋„ฃ์œผ๋ฉด ๊ฐ€๋…์„ฑ์ด ๋–จ์–ด์ง€๊ณ  ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋–จ์–ด์ง) ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆ„๋Š” ๊ฑด ๋Œ€๋ถ€๋ถ„ ๊ธฐ๋Šฅ๋ณ„๋กœ? ์žฌ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๋‹จ์œ„๋ณ„๋กœ? ๋‚˜๋ˆ„๋Š”๊ฒŒ ๋Œ€๋ถ€๋ถ„์ธ๋“ฏ!

์ปดํฌ๋„ŒํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๋‚˜๋ˆŒ ๊ฒƒ์ธ๊ฐ€ ์ƒ๊ฐ์„ ํ•ด๋ณด๋ฉด

  1. ํ™”๋ฉด ์ „์ฒด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ปดํฌ๋„ŒํŠธ (๊ฐ€๋…์„ฑ์ด ๋›ฐ์–ด๋‚จ)
  2. ๋กœ๊ณ  ์ปดํฌ๋„ŒํŠธ
  3. ๊ฒ€์ƒ‰์ฐฝ ์ปดํฌ๋„ŒํŠธ
  4. ๋™๊ทธ๋ผ๋ฏธ ์ปดํฌ๋„ŒํŠธ (์žฌ์‚ฌ์šฉ์„ฑ์ด ๋›ฐ์–ด๋‚จ)

๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๊ฒ ์ง€? ๊ทธ ์•ˆ์— ์„ธ๋ถ€์ ์œผ๋กœ ๋“ค์–ด๊ฐ€๋ฉด ๋ญ ํ•  ๊ฒŒ ๋งŽ๊ฒ ์ง€๋งŒ, ์ „์ฒด์ ์œผ๋กœ ๋ณด๋ฉด ์ด๋ ‡๊ฒŒ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค~ ์ด๋Ÿฐ๋ง

์ปดํฌ๋„ŒํŠธ์˜ ์ข…๋ฅ˜

๊ทธ๋Ÿฌ๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ด๋–ค๊ฑด์ง€ ๋Œ€์ถฉ ์ถ”์ƒ์ ์œผ๋กœ ์•Œ์•˜์œผ๋‹ˆ๊นŒ ์ด์ œ ๊ตฌ์ฒด์ ์œผ๋กœ ์•Œ ์‹œ๊ฐ„์ด์•ผ^^ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ๋‘ ๊ฐ€์ง€ ํ˜•ํƒœ๋ฅผ ์ œ๊ณตํ•˜๊ณ ์žˆ์–ด.

  1. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ class component
  2. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ function component

ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ

ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ

๋‘ ๊ฐ€์ง€ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€..
๋ฆฌ์•กํŠธ ๊ณต์‹๋ฌธ์„œ์—๋Š” ์–ด๋–ป๊ฒŒ ๋‚˜์™€์žˆ๋ƒ๋ฉด

ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธฐ๊ณ„์ ์ด๊ณ , ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ์ธ๊ฐ„ ์นœํ™”์ ์œผ๋กœ ๋‹ค๊ฐ€๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ, ํด๋ž˜์Šคํ˜•์€ ์กฐ๊ธˆ ๊ธฐ๊ณ„์ ์œผ๋กœ, ์šฐ๋ฆฌ ๋งˆ์Œ์— ์ž˜ ์™€๋‹ฟ์ง€ ์•Š๋Š” ๊ตฌ์กฐ์ด๊ณ  ํ•จ์ˆ˜ํ˜•์ด ์šฐ๋ฆฌ๊ฐ€ ์กฐ๊ธˆ ๋” ์นœ์ˆ™ํ•˜๊ฒŒ ๋‹ค๊ฐ€๊ฐˆ ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ๋ผ๋Š” ์–˜๊ธฐ์ž„

ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ์˜›๋‚ ์— ์‚ฌ์šฉ๋๊ณ , ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ์ตœ๊ทผ์— ์ด์ œ ๋œจ๊ธฐ ์‹œ์ž‘ํ–ˆ์–ด ์™œ? ๊ทธ ์ „์—๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ state๋ž‘ life cycle์ด๋ผ๋Š” ๊ฒƒ์„ ๋ชปํ–ˆ๊ฑฐ๋“ . ๊ทผ๋ฐ ์ตœ๊ทผ ๋ฆฌ์•กํŠธ ์—…๋ฐ์ดํŠธ์—์„œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ state๋ž‘ life cycle์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ์—…๋ฐ์ดํŠธํ•ด์คŒใ…Ž^^

๊ทธ๊ฒŒ ๋ฌด์—‡์ด๋ƒ ๋ฐ”๋กœ๋ฐ”๋กœ React Hooks !!
React Hooks๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ state๋ž‘ life cycle์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ทธ๊ฑด ๋‚˜์ค‘์— ์•Œ๊ฒŒ๋˜๊ฒ ์ง€ ๋ญใ…Žใ…Žใ…Ž ^^

๊ฒฐ๋ก  : ์ตœ์‹  ๋ฌธ๋ฒ•์€ Function Component์™€ React Hooks๋ฅผ ์ด์šฉํ•œ ๊ตฌ์กฐ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค

์ฐจ์ด์ ์„ ์กฐ๊ธˆ ๋” ์ž์„ธํ•˜๊ฒŒ ๋“ค์–ด๊ฐ€๋ฉด
Class Component์—์„œ๋Š” state๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ this.setState ๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์„œ ์Šคํ…Œ์ดํŠธ๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผ๋จ. ๊ทผ๋ฐ ์ด๊ฒŒ ๋‹จ์ ์ด ๋ญ๋ƒ๋ฉด, ๋งŒ์•ฝ ํ•˜๋‚˜์˜ state๋งŒ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์€๋ฐ this.setstate ํ•จ์ˆ˜๋ฅผ ๋งค๋ฒˆ ๋ถˆ๋Ÿฌ์•ผํ•œ๋‹ค~ ํ•˜์ง€๋งŒ React Hooks๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด

์š”๊ธฐ ๋ณด์ด๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ ๊ฐ๊ฐ State๋ฅผ ์„ ์–ธํ•  ๋•Œ setter๋„ ๊ฐ™์ด ์„ ์–ธํ•ด์คŒ. ๊ทธ๋ž˜์„œ ์ € ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ๊ฐ์˜ State๋“ค์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋”ฐ. this.setState ๋ฅผ ์„ ์–ธ ์•ˆํ•ด์ค˜๋„ ๋จ

๊ทธ๋ฆฌ๊ณ  function component๋Š” ๊ทธ๋ƒฅ return ๋ฌธ์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋˜๋Š”๋ฐ, class component๋Š” renderํ•จ์ˆ˜ ์•ˆ์—์„œ return๋ฌธ์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰์ด ๋œ๋‹ค. ์—„์ฒญ๋‚˜๊ฒŒ ๊ท€์ฐฎ๊ณ  ๊ทธ๋Ÿฐ๊ฑด ์•„๋‹Œ๋ฐ, ๊ทธ๋ƒฅ ๊ฐœ๋ฐœ์ž๋“ค์€ ์ด๊ฒŒ ๊ท€์ฐฎ๋‚˜๋ด„. ๊ทธ๋ž˜์„œ ๋‚˜๋„ Function Component ์™€ React Hooks ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์กฐํ•ฉ์œผ๋กœ ๋ฐ”๊ฟจ์Œ. ๊ทผ๋ฐ ํŽธํ•œ๊ฑฐ ๊ฐ™์Œ^ ( ์˜ˆ์ „์—๋Š” ๋‚˜๋„ Class Component ์‚ฌ์šฉํ–ˆ์Œ. )

โœ…๋ฆฌ์•กํŠธ State์™€ Props์— ๋Œ€ํ•ด์„œ

๋‘ ๊ฐœ์˜ ๊ฐœ๋…์€ ์ •๋ง ์ค‘์š”ํ•˜์ง€, ๋ฆฌ์•กํŠธ๋ฅผ ํ•œ๋‹ค๊ณ ํ•˜๋ฉด ์–ด๋–ค state์— ๋”ฐ๋ผ์„œ view๋ฅผ ๊ฒฐ์ •ํ•˜๊ณ (์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง) , props๋ฅผ ์ „๋‹ฌํ•˜๊ณ , state๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ , ๊ด€๋ฆฌํ•˜๊ณ  ๋“ฑ๋“ฑ ๋ฆฌ์•กํŠธ์—์„  ์ •๋ง ์ค‘์š”ํ•œ ๊ฐœ๋…๋“ค์ด์•ผ

๋‘ ๊ฐœ์˜ ๊ณตํ†ต์ ์€ ๋‘˜ ๋‹ค ๋ Œ๋”๋ง์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ๋ฐ์ดํ„ฐ๋“ค ์ด๋ผ๋Š” ์ ! ๊ทธ๋Ÿผ state์™€ props๋Š” ๋ฌด์Šจ ์ฐจ์ด๊ฐ€ ์žˆ์„๊นŒ?

state๋Š” ์ปดํฌ๋„ŒํŠธ์•ˆ์—์„œ ์‚ฌ์šฉ์ด ๋˜๋Š” ๋ฐ์ดํ„ฐ์ด๋‹ค!

props๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ ์ „๋‹ฌ๋˜์–ด์„œ(๋งˆ์น˜ ํ•จ์ˆ˜์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์ฒ˜๋Ÿผ)์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€? ใ…‡ใ…‡ ๊ทธ๋Ÿด๊ฑฐ๊ฐ™์•˜์–ด ๊ทธ๋ž˜์„œ ์ค€๋น„ํ–ˆ์ง€

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

์•„์ง ์ž˜๋ชจ๋ฅด๋”๋ผ๋„ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ์™€ React Hooks ๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ์„ ํ•ด์•ผ ์ต์ˆ™ํ•ด์ง!

State ์‚ฌ์šฉํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ Counter ์˜ˆ์ œ

TestComponent.jsx

์œ„์˜ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด count state ๋ฅผ ์„ ์–ธํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Œ! ๋ณดํ†ต state๋กœ ์ •ํ•˜๋Š” ๊ฒƒ๋“ค์€ ๋ณ€ํ•˜๋Š” ๊ฐ’์„ state๋กœ ๋งŽ์ด ์„ค์ •ํ•จ!

์œ„ ์˜ˆ์ œ์—์„œ๋Š” count๊ฐ’ ์ด ๋ณ€ํ•˜๋Š” ๊ฐ’์ด๋‹ˆ๊นŒ state๋กœ ์ง€์ •์„ ํ•ด์ค€ ๊ฒƒ์ž„. ๊ทธ๋ฆฌ๊ณ  state๋กœ ์ง€์ •ํ•ด์ค€ ๊ฐ’์ด ๋ณ€ํ•  ๋•Œ๋งˆ๋‹ค ๊ทธ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์ด ๋‹ค์‹œ ๋ Œ๋”๋ง๋จ!

ํŽ˜์ด์ง€๊ฐ€ ์ „์ฒด๊ฐ€ ๋‹ค์‹œ ๋ฆฌ๋กœ๋“œ ๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํ•ด๋‹น ์ƒํƒœ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๋‹ค์‹œ ๋ Œ๋”๋ง์ด ๋œ๋‹ค~ ์ด ๋ง์”€

๊ทธ๋ฆฌ๊ณ  state๋Š” ๋ฐฐ์—ด, ์ˆซ์ž, ๋ฌธ์ž, ๊ฐ์ฒด ๋ชจ๋“  ํ˜•ํƒœ๋กœ ์กด์žฌํ•  ์ˆ˜ ์žˆ์–ด.

๊ทธ๋ฆฌ๊ณ  ์ด๋ ‡๊ฒŒ ์ปดํฌ๋„ŒํŠธ์•ˆ์—์„œ ์ •์˜๋œ state๋Š” ์ด ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์— ๋งŒ์•ฝ์— ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋กœ state๋ฅผ ๋„˜๊ฒจ์„œ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด? ์ „๋‹ฌ์„ ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ๋ ๊นŒ?

๊ทธ ๋•Œ ์šฐ๋ฆฌ์˜ props์˜ ๊ฐœ๋…์ด ๋“ค์–ด๊ฐ€๋Š”๊ฑฐ์ง€

TestComponent.jsx

TestChildComponent.jsx

TestComponent ์—์„œ TestChildComponent๋กœ count state๋ฅผ ๋„˜๊ธฐ๋ ค๋ฉด props ๊ฐœ๋…์„ ๋„์ž…ํ•ด์„œ ์ „๋‹ฌ์„ ํ•ด์•ผ ๋ผ!

์œ„์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ props๋ฅผ ๋„˜๊ธฐ๊ฒŒ ๋˜์–ด์žˆ์–ด. ๋‚ด๊ฐ€ ์˜ˆ์ œ์—์„œ๋Š” ๋‘˜ ๋‹ค count๋กœ ์ด๋ฆ„์„ ์ง€์ •ํ•ด๋†”์„œ ํ—ท๊ฐˆ๋ฆด์ˆ˜๋„ ์žˆ๋Š”๋ฐ, ๋„ˆ๊ฐ€ ๋งŒ์•ฝ์— ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ๋„˜๊ธฐ๊ณ  ์‹ถ์œผ๋ฉด ๋‹ค๋ฅธ์ด๋ฆ„ = { count } ์ด๋Ÿฐ์‹์œผ๋กœ ๋‹ค๋ฅธ์ด๋ฆ„์œผ๋กœ props๋ฅผ ๋„˜๊ธธ ์ˆ˜ ์žˆ์–ด.

๊ทธ๋Ÿผ ๋„˜๊ธฐ๋Š”๊ฑฐ๊นŒ์ง€๋Š” ์„ฑ๊ณตํ–ˆ๋Š”๋ฐ ๋ฐ›๋Š”์ชฝ์—์„œ ์‚ฌ์šฉ์€ ์–ด๋–ป๊ฒŒ ํ• ๊นŒ?

๋ฐ›์€์ชฝ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์œ„์—์„œ ๋ฐ‘ ์ค„ ์นœ ๊ฒƒ์ฒ˜๋Ÿผ ์œ„์—์„œ ๋„˜๊ธธ props ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•ด๋†“์€ ๊ฑธ๋กœ ๋ฐ›์„ ์ˆ˜ ์žˆ์–ด ๋งŒ์•ฝ์— count๊ฐ€ ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ์ด๋ฆ„์œผ๋กœ ์ง€์ •ํ•ด๋†จ์œผ๋ฉด ํ•ด๋‹น ์ด๋ฆ„์œผ๋กœ ๋ฐ›์•„์•ผ ๋ผ!

์ €๋ ‡๊ฒŒ count ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ€๋ชจ๋กœ ๋ฐ›๊ฒ ๋‹ค๊ณ  ์ •ํ•ด๋†“๊ณ , ์•„๋ž˜ View๋ฅผ ์ฑ…์ž„์ง€๋Š” return๋ฌธ์—์„œ ์‚ฌ์šฉ์„ ํ•˜๋ฉด ๋˜๋Š”๊ฑฐ์ž„! ์ •๋ง ์‰ฝ์ฃ ~?

๊ทธ๋Ÿผ ์ € count๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋กœ๋ถ€ํ„ฐ ๋ฐ›์€ props ๊ฐ€ ๋˜๋Š”๊ฑฐ์ง€.

props children์— ๋Œ€ํ•ด์„œ

์ด์ œ props์— ๋Œ€ํ•ด์„œ ์•Œ์•˜๋‹ค ์ด๊ฑฐ์•ผ. ๊ทผ๋ฐ children์€ ๋ญ๋ƒ๊ณ ?

์šฐ๋ฆฌ๊ฐ€ props๋กœ ๋„˜๊ธฐ๊ณ  ์‹ถ์€ ๋ฐ์ดํ„ฐ๊ฐ€ ์ €๋Ÿฐ ์ƒํƒœ๊ฐ’์ด๋‚˜ ํŠน์ •๊ฐ’๋ง๊ณ , HTML์š”์†Œ๋ฅผ ๋„˜๊ธฐ๊ณ ์‹ถ์œผ๋ฉด?

๊ทธ๋Ÿด๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด children ์ด๋ผ๋Š” props ์ž…๋‹ˆ๋”.

์šฐ๋ฆฌ๋Š” ์ €๋ ‡๊ฒŒ TestChildComponent ์—์„œ HTML ์š”์†Œ๋ฅผ ์ถœ๋ ฅํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?

children์„ ๋ฐ›๊ฒ ๋‹ค๊ณ  ๋ช…์‹œ๋ฅผ ํ•ด์ค€ ๋‹ค์Œ return ๋ฌธ์—์„œ {children} ์„ ๊ณ ๋Œ€๋กœ ์ถœ๋ ฅํ•ด์ฃผ๋ฉด

<p>์š”๊ธฐ๋Š” children ์ด๋ฆ„์œผ๋กœ ์ „๋‹ฌ๋ ๊ฑฐ์•ผ!</p>

์ด ๋ถ€๋ถ„์ด ์ „๋‹ฌ์ด ๋˜๋Š”๊ฑฐ์ง€! ์ด๊ฒŒ props children ์˜ ๊ฐœ๋…์ด์•ผ. ๋‹ค๋ฅธ props๋“ค์€ ๋„ˆ๊ฐ€ ์ด๋ฆ„์„ ์ •ํ•˜๋Š”๋Œ€๋กœ ์ „๋‹ฌ์ด ๋˜๊ฒ ์ง€๋งŒ, ์ด๋ ‡๊ฒŒ children ์ฒ˜๋Ÿผ ์ •ํ•ด์ง„ ์š”์†Œ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ!

์‰ฝ์ฃ ?

state๋ž‘ props์˜ ๊ฐœ๋… ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ๋“ค์€ ๋‹ค ๊ฐ€๋ฅด์ณ์ค€๋“ฏ

๊ทธ๋Ÿผ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š”๊ฒŒ, ๋งŒ์•ฝ ํ”„๋กœ์ ํŠธ์˜ ํฌ๊ธฐ๊ฐ€ ์ •๋ง ์ •๋ง ์ปค์ ธ์„œ

๊ณ ์กฐ ํ• ์•„๋ฒ„์ง€ ์ปดํฌ๋„ŒํŠธ โ†’ ์ฆ์กฐ ํ• ์•„๋ฒ„์ง€ ์ปดํฌ๋„ŒํŠธ โ†’ ํ• ์•„๋ฒ„์ง€ ์ปดํฌ๋„ŒํŠธ โ†’ ์•„๋ฒ„์ง€ ์ปดํฌ๋„ŒํŠธ โ†’ ์ž์‹ ์ปดํฌ๋„ŒํŠธ ์ด๋ ‡๊ฒŒ ๊ณ„์ธต๊ตฌ์กฐ๊ฐ€ ์ด๋ฃจ์–ด์ ธ์„œ ๋งจ ์œ„์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋งจ ์•„๋ž˜์— ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒœ๊ฐ’์„ ๋„˜๊ธฐ๊ณ ์‹ถ์–ด. ๊ทธ๋Ÿฌ๋ฉด ์ผ์ผ์ด props๋กœ ๋„˜๊ฒจ์•ผํ• ๊นŒ? No. ์ ˆ๋Œ€ ๊ทธ๋ ‡๊ฒŒ ์ผ์ผ์ด ๋‹ค ํ•  ์ˆ˜์—†์–ด.

๊ฐ€๋…์„ฑ๋„ ์ •๋ง ๋–จ์–ด์ง€๊ณ  ์ฝ”๋“œ์˜ ํ€„๋ฆฌํ‹ฐ๋„ ์ •๋ง ๋–จ์–ด์งˆ๊ฑฐ์•ผ. ์ด์ œ ๊ทธ๋Ÿด ๋•Œ ํ•„์š”ํ•œ ๊ฐœ๋…์ด ๋ฐ”๋กœ๋ฐ”๋กœ ๊ทธ ๋ฌด์‹œ๋ฌด์‹œํ•œ ์ „์—ญ ์Šคํ…Œ์ดํŠธ ๊ด€๋ฆฌ ๊ฐ€ ๋˜๋Š”๊ฑฐ์ง€. ๋Œ€ํ‘œ์ ์ธ ๊ฒƒ๋“ค๋กœ๋Š” Redux mobX Context API , ๊ทธ๋ฆฌ๊ณ  ์ƒˆ๋กญ๊ฒŒ ๋œจ๊ณ ์žˆ๋Š” Recoil ๋“ฑ๋“ฑ... ๊ฑฐ์˜ ๋ฆฌ์•กํŠธ์˜ ๋ํŒ์™•๐Ÿ‘ฟ์ด์ง€. ๊ฐ๊ฐ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹๋„ ๋‹ค๋ฅด๊ณ , ์‚ฌ์šฉํ•˜๋Š” ์ƒํ™ฉ๋„ ์กฐ๋”์”ฉ ๋‹ฌ๋ผ. ์ผ๋‹จ ์ด๋Ÿฐ๊ฒƒ๋“ค์ด ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ๊ณ ์žˆ๋Š” ๊ฒƒ ๋งŒ์œผ๋กœ๋„ ๋„ˆํฌ๋Š” ์ตœ๊ณ ์•ผ.

์ „์—ญ ์Šคํ…Œ์ดํŠธ ๊ด€๋ฆฌ ๋‹จ์–ด๋งŒ ๋“ค์–ด๋„ ์œ ์ถ”ํ•  ์ˆ˜ ์žˆ๋“ฏ์ด ์ „์ฒด์ ์œผ๋กœ ์Šคํ…Œ์ดํŠธ๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ์–ด๋– ํ•œ ๊ฒƒ์ด ์žˆ๊ณ , ๊ฑฐ๊ธฐ๋งŒ ์ฐธ์กฐ๋ฅผ ํ•˜๋ฉด ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ทธ๋Ÿฐ ๋Š๋‚Œ์ ์ธ ๋Š๋‚Œ. ์—ฌํŠผ ๊ณ ์ƒ-โœŒ๏ธ๋ฟ…

โœ…React ์ด๋ฒคํŠธ ๋ฐ ์ด๋ฒคํŠธ ์ „๋‹ฌ

ํด๋ฆญํ–ˆ์„ ๋•Œ, ๋งˆ์šฐ์Šค ์˜ฌ๋ ธ์„ ๋•Œ, ๋งˆ์šฐ์Šค ๋‚˜๊ฐ”์„ ๋•Œ ๋“ฑ๋“ฑ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด๋ฒคํŠธ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์€ HTML ์ด๋ž‘ JS๋ž‘ ๋˜‘๊ฐ™์Œ!

๋„ˆ๊ฐ€ ์ด๋ฒคํŠธ๋ฅผ ๋„ฃ๊ณ  ์‹ถ์€ ์š”์†Œ์— on ๋งŒ ์จ๋„ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ด๋ฒคํŠธ๋“ค์ด ๋‚˜์˜ด. ์ œ์ผ ๋งŽ์ด ์“ฐ๋Š”๊ฑด click ์ด๋‚˜ change ์ž„

์ปดํฌ๋„ŒํŠธ์•ˆ์— ํ•จ์ˆ˜ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ด์„œ (const) onClick ํŠน์„ฑ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋˜๋Š”๊ฑฐ์ž„

์ด์ •๋„๋ฉด ์ด๋ฒคํŠธ ์“ฐ๋Š”๊ฑด ๋‹ค ์•Œ์•˜๋‹ค ๋ณด๋ฉด ๋จใ…Žใ…Ž

์ด๋ฒคํŠธ๋„ props๋กœ ๋„˜๊ธธ ์ˆ˜ ์žˆ๋‹ค๊ณ ?

ใ…‡ใ…‡

๊ฐ€๋” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒ์„ฑํ•œ ํ•จ์ˆ˜๋ฅผ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ์€ ์š•๊ตฌ๊ฐ€ ๋“ค ๋•Œ๊ฐ€ ์žˆ์–ด

๊ทธ๋Ÿด ๋•Œ ํ•จ์ˆ˜๋ฅผ props๋กœ ๋„˜๊ธธ ์ˆ˜ ์žˆ์Œ! ๊ทธ๋ƒฅ state๋„˜๊ธฐ๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ ๋˜‘๊ฐ™์ด ๋„˜๊ธฐ๋ฉด ๋จ

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ

์ž์‹ ์ปดํฌ๋„ŒํŠธ

๊ฒฐ๊ณผ

์–ด์šฐ์ธํ•˜์ ธ?

์š”๊ธฐ๊นŒ์ง€ ๋‹ค ์ดํ•ดํ–ˆ์œผ๋ฉด state, props์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ๋“ค์€ ๋‹ค ์•ˆ๋‹ค๊ณ  ๋ด๋„ ๋จ

์ด์ œ ์ ์  ๋ฆฌ์•กํŠธ๋ฅผ ํ•˜๋‹ค๊ฐ€ props๋กœ ์ผ์ผ์ด ๋„˜๊ธฐ๋Š” ์ž‘์—…๋“ค์ด ๊ท€์ฐฎ์•„์งˆ๋•Œ์ฏค ๋˜๋ฉด ์ „์—ญ ์Šคํ…Œ์ดํŠธ ๊ด€๋ฆฌํˆด๋“ค์— ๋ˆˆ์„ ๋œจ๋ฉด์„œ ๊ทธ์ชฝ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•˜๋Š”๊ฑฐ์ง€.,

์ง€๊ธˆ ์‹œ์ž‘ํ•˜๊ธฐ์—” ์กฐ๊ธˆ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋งŽ์ด ๋†’๊ธฐ๋•Œ๋ฌธ์— ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ๋“ค์„ ์ตํ˜€๋‘๊ณ  ํ•˜๋Š”๊ฑธ ์ถ”์ฒœํ• ๊ฒŒ

โœ…๋ฆฌ์•กํŠธ ์Šคํƒ€์ผ๋ง ํ•˜๋Š” ๋ฒ•

๋ฆฌ์•กํŠธ์—์„œ ์Šคํƒ€์ผ๋ง์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์„ธ ๊ฐ€์ง€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. cssํŒŒ์ผ์„ ๋”ฐ๋กœ ๋งŒ๋“ค๊ณ  import ํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•
  2. inline styling์œผ๋กœ ์กฐ์ ธ๋ฒ„๋ฆฌ๋Š” ๋ฐฉ๋ฒ•
  3. styled-components ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์Šคํƒ€์ผ๋ง ํ•˜๋Š” ๋ฐฉ๋ฒ•

๋‚˜๋„ ๋งจ ์ฒ˜์Œ์—๋Š” 1๋ฒˆ์„ ์‚ฌ์šฉํ•ด์„œ ํ–ˆ์—ˆ์Œ. ๊ทผ๋ฐ ์ € ๋ฐฉ์‹์€ HTML ์š”์†Œ๋งˆ๋‹ค ClassName์„ ์ง€์ •์„ ํ•ด์ค˜์•ผํ•จ (๋ฆฌ์•กํŠธ๋Š” Class๊ฐ€ ์•„๋‹ˆ๋ผ ClassName์œผ๋กœ ์ด๋ฆ„์„ ์ง€์–ด์ค˜์•ผํ•จ) ๊ทธ๋ž˜์„œ class๋ช…์„ ๊ณ„์† ์ƒ๊ฐํ•ด์ค˜์•ผ ํ•˜๊ณ  ์ด๋ฆ„์ด ๊ฒน์น˜๋ฉด ์•ˆ๋˜๊ธฐ๋•Œ๋ฌธ์— ์ž˜ ์ƒ๊ฐ์„ ํ•ด์•ผ๋จ. ๊ทธ๊ฒŒ ์€๊ทผ ๊ท€์ฐฎ์Œ!

๊ทธ๋ฆฌ๊ณ  CSS ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํŒŒ์ผ ๊ฐœ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚จ ์ด๊ฒŒ ๋˜ ํŒŒ์ผ๊ตฌ์กฐ๊ฐ€ ๋ณด๊ธฐ ์•ˆ์ข‹์Œ!

๊ทธ๋ฆฌ๊ณ  2๋ฒˆ์€

<div style={{color:'red'}}>๋นจ๊ฐ•์“ฐ</div>

์ด๋Ÿฐ์‹์œผ๋กœ ์Šคํƒ€์ผ๋ง์„ ํ•˜๋Š”๊ฑด๋ฐ ๊ทธ๋ƒฅ ํ•œ ์ค„ ๋„ฃ์„๋•Œ๋Š” ์œ ์šฉํ•˜์ง€๋งŒ CSS๋ฅผ ๋งŽ์ด ์ ์šฉ์„ ํ•ด์•ผ๋œ๋‹ค๋ฉด ๋ฉ”์ธ ์ฝ”๋“œ๊ฐ€ ์ •๋ง ๋”๋Ÿฌ์›Œ์ง ๊ทธ๋ž˜์„œ ๋น„์ถ”!

๋Œ€๋ง์˜ 3๋ฒˆ styled-components ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

์ด ๋ฐฉ์‹์€ styled-components ๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์Šคํƒ€์ผ๋ง์„ ํ•˜๋Š” ๋ฐฉ์‹์ž„

CSSํŒŒ์ผ์„ ๋”ฐ๋กœ ๋งŒ๋“คํ•„์š”๋„ ์—†๊ณ  ClassName์„ ๋ถ™์—ฌ์ค„ ํ•„์š”๋„ ์—†์Œ!

๊ทธ๋ฆฌ๊ณ  ์Šคํƒ€์ผ๋ง ์ฝ”๋“œ๊ฐ€ ๋”ฑ๋”ฑ ๋ถ„๋ฆฌ๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๋„ ๊น”๋”ํ•ด์ง€๊ณ  ๊ทธ๋ฆฌ๊ณ 

SCSS ๋ผ๋Š” CSS๋ฅผ ๋„์™€์ฃผ๋Š” ์Šคํฌ๋ฆฝํŒ… ๋„๊ตฌ ์–ธ์–ด๋„ ์ง€์›์„ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— ์ข‹์Œ!

๋ฉ”์ธ ํด๋”์—์„œ

$ npm install styled-components

๋ฅผ ์ž…๋ ฅํ•ด์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์šฐ์„  ๋‹ค์šด๋ฐ›์•„์•ผ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•จ!

๊ทธ๋ฆฌ๊ณ  ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด๋ฉด

` ์ด ๋ชจ์–‘์€ ~ (๋ฌผ๊ฒฐ๋ชจ์–‘)์„ ์‰ฌํ”„ํŠธ ์•ˆ๋ˆ„๋ฅด๊ณ  ๋ˆ„๋ฅด๋ฉด ๋‚˜์˜ค๋Š” ๊ธฐํ˜ธ์ž„!

๋”ฐ์˜ดํ‘œ๋‚˜ ์Œ๋”ฐ์˜ดํ‘œ๊ฐ€์•„๋‹˜!

์ด๋Ÿฌ๋ฉด CSS ํŒŒ์ผ๋„ ์•ˆ๋งŒ๋“ค์–ด๋„๋˜๊ณ  ClassName๋„ ๋ถ€์—ฌ์•ˆํ•ด๋„ ๋˜๊ณ ,

์Šคํƒ€์ผ๋ง์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์œผ๋ฉด CSSํŒŒ์ผ์„ ์ฐพ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๊ทธ๋ƒฅ ๋ฐ”๋กœ ์ปดํฌ๋„ŒํŠธ ํŒŒ์ผ๋กœ๊ฐ€์„œ ์ฐพ์œผ๋ฉด ๊ธˆ๋ฐฉ์ด๋‹ˆ๊นŒ ๊ฐ€๋…์„ฑ๋„ ์ข‹์•„์ง€๊ณ  ์žฅ์ ์ด ๋งŽ์€ ๊ฒƒ ๊ฐ™์Œ!

์ด๊ฑฐ๋Š” ์ •๋‹ต์ด ์—†๊ณ  ์ž๊ธฐ๊ฐ€ ํŽธํ•œ ๋ฐฉ์‹๋Œ€๋กœ ํ•˜๋ฉด ๋จ!

styled-components ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋„ ๋‹จ์ ์ด ์žˆ๋‹ค๋ฉด, ์ผ๋‹จ ๋ฌธ๋ฒ• ์ž๋™ ์™„์„ฑ ๊ธฐ๋Šฅ์„ ์ง€์›์„ ์•ˆํ•ด์คŒ. ๊ทผ๋ฐ ๋‚˜๋Š” ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๊ฐ€ ๋–จ์–ด์ง€๋Š” ๊ฒƒ ๋ณด๋‹ค๋Š” ๋‚ด๊ฐ€ ์กฐ๊ธˆ ๋ถˆํŽธํ•œ๊ฒŒ ์กฐ๊ธˆ ๋” ๋‚ซ๋‹ค๊ณ  ์ƒ๊ฐํ•จ

๋ชจ๋ฅด๋ฉด ๊ตฌ๊ธ€๋งํ•˜๋ฉด ๋ฐ”๋กœ๋‚˜์˜ด^^

โœ…๋ฆฌ์•กํŠธ์—์„œ ํ•„์š”ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฐพ๊ธฐ

์ด ์ฃผ์ œ๋Š” ๋ฆฌ์•กํŠธ์— ๊ฐ€๊นŒ์šด ๋‚ด์šฉ์ด๋ผ๊ธฐ ๋ณด๋‹ค๋Š” ์˜คํ”ˆ์†Œ์Šค์— ๋Œ€ํ•ด ์ต์ˆ™ํ•ด์ง€์ž ๋ผ๋Š” ์ทจ์ง€์˜ ๋‚ด์šฉ์ด์•ผ

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋“ค์€ ๋งŽ๊ณ , ์‹œ๊ฐ„์ด ๋ถ€์กฑํ• ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ๊ธฐ๋Šฅํ•˜๋‚˜์— ์—„์ฒญ๋‚œ ์‹œ๊ฐ„์„ ํˆฌ์žํ•  ์ˆ˜ ์—†์„ ๋•Œ ์˜คํ”ˆ์†Œ์Šค๋ฅผ ์ ๊ทน ํ™œ์šฉํ•˜๋ฉด ์–ป์„ ์ˆ˜ ์žˆ๋Š” ์ด๋“์ด ๋งŽ์•„.

๋‚ด๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ž‘ ์˜คํ”ˆ์†Œ์Šค๋ฅผ ํ˜ผ์šฉํ•ด์„œ ๋‹จ์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ๋‘˜ ๋‹ค ๋˜‘๊ฐ™์€ ์˜๋ฏธ์ด๋‹ˆ๊นŒ ๊ทธ๋ ‡๊ฒŒ ์•„์„ธ์š”

์˜ˆ๋ฅผ๋“ค์–ด

  1. ๋‹ฌ๋ ฅ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ๋‹ค.
  2. ์˜ˆ์œ ๋ฒ„ํŠผ์ด๋‚˜ ์•„์ด์ฝ˜์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ๋‹ค.
  3. ์‚ฌ์ง„์„ ํ•œ์žฅ ํ•œ์žฅ ์ž๋™์œผ๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ์Šฌ๋ผ์ด๋“œ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ๋“ค์„ ์ผ์ผ์ด ๊ตฌํ˜„ํ•  ์‹œ๊ฐ„์ด ์—†๋‹ค๋ฉด, ์˜คํ”ˆ์†Œ์Šค๋ฅผ ์ ๊ทน ํ™œ์šฉํ•˜๋ฉด ์ •๋ง ์‹œ๊ฐ„์„ ๋งŽ์ด ๋‹จ์ถ•์‹œํ‚ฌ ์ˆ˜ ์žˆ์ง€. ๊ทผ๋ฐ ์–ด๋–ป๊ฒŒ ์ฐพ์•„์•ผํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค๊ณ ? ๊ทธ๋ƒฅ ๊นƒํ—ˆ๋ธŒ์— ๊ฒ€์ƒ‰ํ•˜๋ฉด ๋ฐ”๋กœ ๋‚˜์™€

๋‹ฌ๋ ฅ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด์ฃผ๋Š” ์˜คํ”ˆ์†Œ์Šค๋ฅผ ์ฐพ๊ฒ ๋‹ค ๊ทธ๋Ÿฌ๋ฉด ๊นƒํ—ˆ๋ธŒ์— ํ•ต์‹ฌ ๋‹จ์–ด๋งŒ ๊ฒ€์ƒ‰ํ•˜๋ฉด ๋ผ

react + calendar ๋งŒ ๊ฒ€์ƒ‰ํ•˜๋ฉด ๋ฐ”๋กœ ๋‚˜์˜ด

๊ทธ๋Ÿฌ๋ฉด ์ด๋Ÿฐ์‹์œผ๋กœ ๋ฆฌ์•กํŠธ ์บ˜๋ฆฐ๋” ์˜คํ”ˆ์†Œ์Šค๋“ค์ด ์ญˆ์šฑ ๋‚˜์˜ค๋Š”๋ฐ star์ˆ˜๊ฐ€ ๋งŽ์€ ๊ฒƒ์— ๋“ค์–ด๊ฐ€๋„ ์ƒ๊ด€์—†๊ณ  ๋„ˆ๊ฐ€ ๋งˆ์Œ์— ๋“œ๋Š” ๊ณณ์— ๋“ค์–ด๊ฐ€์„œ npm install๋กœ ๋‹ค์šด๋ฐ›๊ณ , ์‚ฌ์šฉ๋ฒ•๋„ ๋Œ€๋ถ€๋ถ„ README.MD์— ๋‹ค ์ ํ˜€์žˆ์œผ๋‹ˆ๊นŒ ์ฐจ๊ทผ์ฐจ๊ทผ ์ฝ์–ด๋ณด๊ณ  ์‚ฌ์šฉํ•˜๋ฉด ๋ผ

๋ณดํ†ต star์ˆ˜๊ฐ€ ๋งŽ์€ ์˜คํ”ˆ์†Œ์Šค๊ฐ€ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ์ž…์ฆ์ด ๋๋‹ค๋Š” ์†Œ๋ฆฌ๋‹ˆ๊นŒ ๋ฏฟ๊ณ  ์จ๋„ ์ข‹์•„.

๊ทธ๋ฆฌ๊ณ  ์‚ฌ์šฉํ•˜๋‹ค๊ฐ€ ์˜ค๋ฅ˜๊ฐ™์€ ๊ฒƒ์„ ๋„ˆ๊ฐ€ ๋ฐœ๊ฒฌํ•˜๋ฉด ์ปจํŠธ๋ฆฌ๋ทฐํ„ฐ๋„ ๋  ์ˆ˜ ์žˆ๊ณ  ์˜คํ”ˆ์†Œ์Šค ๊ฒฝํ—˜๋„ ํ•  ์ˆ˜ ์žˆ์œผ๋‹ˆ ์ •๋ง ์ข‹๊ฒ ์ง€?

๋Œ€ํ‘œ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค

๊ทธ๋ฆฌ๊ณ  ๋Œ€ํ‘œ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์€ ๋ช‡ ๊ฐœ ์™ธ์›Œ๋‘๋Š”๊ฒŒ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋Š”๋ฐ์— ์‹œ๊ฐ„์ ˆ์•ฝ์„ ๋งŽ์ด ํ•  ์ˆ˜ ์žˆ์–ด. ์šฐ์„  ๊ธฐ์–ต๋‚˜๋Š” ๋Œ€ํ‘œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋‚˜์—ดํ•ด๋ณผ๊ฒŒ

  1. ํŽ˜์ด์ง€ ์ด๋™ ๊ตฌํ˜„์„ ๋„์™€์ฃผ๋Š” react-router, react-router-dom [link](https://github.com/ReactTraining/react-router\)
  2. ๋น„๋™๊ธฐ HTTP ํ†ต์‹ ์„ ๋„์™€์ฃผ๋Š” axios link
  3. ์Šคํƒ€์ผ๋ง์„ ๋„์™€์ฃผ๋Š” styled-components link
  4. ์ „์—ญ state ๊ด€๋ฆฌ ๋„๊ตฌ redux, react-redux link
  5. ๋ฒ„ํŠผ, ๋ฆฌ์ŠคํŠธ, ์•„์ด์ฝ˜ ๋“ฑ๋“ฑ ํ™ˆํŽ˜์ด์ง€ ๊ตฌ์„ฑ์˜ ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ๋“ค์„ ์ œ๊ณตํ•ด์ฃผ๊ณ  ๋””์ž์ธ๋„ ๊น”๋”ํ•œ material-ui link
  6. ํ…Œ์ŠคํŒ…์„ ๋„์™€์ฃผ๋Š” jest link
  7. ์ฝ”๋“œ๋ฅผ ๊น”๋”ํ•˜๊ฒŒ ์ •๋ฆฌํ•ด์ฃผ๋Š” prettier link
  8. ์ฝ”๋“œ์˜ ํ€„๋ฆฌํ‹ฐ๋ฅผ ๋†’์—ฌ์ฃผ๋Š” ์ •์  ๋ถ„์„ ๋„๊ตฌ eslint link

๋“ฑ๋“ฑ๋“ฑ ์ด์ •๋„๋งŒ ์ž˜ ์•Œ์•„๋‘ฌ๋„ ํ™ˆํŽ˜์ด์ง€ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ๋Š” ๋ฌธ์ œ์—†๊ณ , ๊ทธ๋•Œ ๊ทธ๋•Œ ์ž์‹ ์ด ํ•„์š”ํ•œ ๊ฒƒ์„ ํŒŒ์•…ํ•˜๊ณ  ๊ฒ€์ƒ‰ํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฐ๋‹จ์„ ๋‚ด๋ฆฌ๋Š” ๊ฒƒ๋„ ํ”„๋กœ์ ํŠธ ์†๋„๋ฅผ ๋†’์ด๊ณ  ํ€„๋ฆฌํ‹ฐ๋ฅผ ๋†’์ด๋Š” ๊ฒƒ์— ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™์Œ! ์ชผ์šฐ์•„์š”~ ์˜ค๋Š˜์€ ์š”๊ธฐ๊นŒ์ง€ - ๋ฟ…โœŒ๏ธ

โœ…๋ฆฌ์•กํŠธ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง

์šฐ์„  ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์ด ๋ญ˜๊นŒ๋ถ€ํ„ฐ ์•Œ์•„์•ผ๊ฒ ์ง€์˜น

ํฌ๊ฒŒ ๋Œ€๋‹จํ•œ๊ฑด ์•„๋‹ˆ๊ณ , ๋งŒ์•ฝ ๋„ˆ๊ฐ€ ์–ด๋– ํ•œ ์กฐ๊ฑด์ด ๋งŒ์กฑ๋  ๋•Œ๋งŒ ์–ด๋–ค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ๋‹ค.

์˜ˆ๋ฅผ๋“ค์–ด ๋ณดํ†ต ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค ๋•Œ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•˜๊ณ , ํ™•์ธ ์ฐจ ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ํ•œ๋ฒˆ ๋” ์ž…๋ ฅํ•˜๊ฒŒ ๋งŒ๋“œ๋Š”๋ฐ, 1์ฐจ์™€ 2์ฐจ ๋น„๋ฐ€๋ฒˆํ˜ธ๊ฐ€ ๊ฐ™์„ ๋•Œ๋งŒ ํ†ต๊ณผ ๋ผ๋Š” ๋ฉ”์„ธ์ง€๋ฅผ ๋„์šฐ๊ณ  ์‹ถ๋‹ค๋˜๊ฐ€,

๋„ˆ๊ฐ€ ๋ฏธ๋‹ˆ ์œ ํŠœ๋ธŒ๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ ํ™”๋ฉด์ด 1000px ์ด์ƒ์ผ ๋•Œ๋Š” ํ•œ ์ค„์— 4๊ฐœ์˜ ์˜์ƒ์„ ๋ณด์—ฌ์ฃผ์ง€๋งŒ, ๊ทธ๊ฒƒ๋ณด๋‹ค ์ž‘์•„์ง€๋ฉด 2๊ฐœ์˜ ์˜์ƒ๋งŒ ๋„์šด๋‹ค๋˜๊ฐ€์™€ ๊ฐ™์ด

์–ด๋–ค ์กฐ๊ฑด์— ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๊ธฐ๋ฅผ ์›ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์Šคํ‚ฌ์ด์ง€. ๋ฆฌ์•กํŠธ์˜ ์ˆ˜๋งŽ์€ ํŒจํ„ด์ค‘์— ๋งŽ์ด ์“ฐ์ด๋Š” ํŒจํ„ด์ด๋ผ ์ด๋ ‡๊ฒŒ ๋“ค๊ณ ์™”์Œ!

๋ฆฌ์•กํŠธ์—์„œ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ํ•  ๋•Œ ๋‚˜๋Š” ์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋ฅผ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉํ•ด

์‚ผํ•ญ ์—ฐ์‚ฐ์ž๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์ค‘์— ํ•˜๋‚˜์ธ๋ฐ, ? ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ๋ฒ•์ด์ง€.

condition ? "condition์ด true์ž…๋‹ˆ๋‹ค." : "condition์ด false์ž…๋‹ˆ๋‹ค."

์œ„์— ์˜ˆ์‹œ๊ฐ€ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž ๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ์ธ๋ฐ, condition ์ด๋ผ๋Š” ์กฐ๊ฑด์„ ๊ธฐ์ค€์œผ๋กœ

: ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์ด์—๋‘๊ณ  ์™ผ์ชฝ์€ true์ผ ๋•Œ, ์˜ค๋ฅธ์ชฝ์€ false์ผ ๋•Œ ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ด

๊ฐ„๋‹จํžˆ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž์— ๋Œ€ํ•ด์„œ ์•Œ์•˜์œผ๋‹ˆ๊นŒ, ๋ฆฌ์•กํŠธ์—์„œ ์–ด๋–ป๊ฒŒ ์ ์šฉ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž๊ตฌ

Counter.jsx

๊ฐ„๋‹จํ•œ ์นด์šดํ„ฐ ์˜ˆ์ œ๋กœ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ๋ณด์—ฌ์ค„๊ฒŒ

์–ด๋ ค์šด ๊ฑด ์—†์–ด count state๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด 1์ฆ๊ฐ€ ํ•˜๊ฑฐ๋‚˜, 1๊ฐ์†Œ ํ•˜๊ฑฐ๋‚˜ ํ•˜๋Š” ๊ธฐ๋Šฅ์ด์ง€

๊ทธ๋ฆฌ๊ณ  return๋ถ€๋ถ„์—์„œ {count > 5 ? <div>5๊ฐ€ ๋„˜์—ˆ๋‹ค!</div> : <div>5๋ฅผ ๋ชป๋„˜์—ˆ์–ด...</div>}

์ด ๋ถ€๋ถ„์ด ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ๋ณด์—ฌ์ฃผ๋Š” ๋ถ€๋ถ„์ด์•ผ.

count > 5 ์—์„œ ์กฐ๊ฑด์„ ํ™•์ธํ•˜๊ณ  ์กฐ๊ฑด์ด ๋งž๋‹ค๋ฉด <div>5๊ฐ€ ๋„˜์—ˆ๋‹ค!</div>๋ฅผ ํ‘œ์‹œํ•ด์ฃผ๊ณ ,

์•„๋‹ˆ๋ผ๋ฉด <div>5๋ฅผ ๋ชป๋„˜์—ˆ์–ด...</div> ์„ ๋ณด์—ฌ์ฃผ๋Š” ์ •๋ง ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ์ด์ง€

HTML ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑด ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ์–˜๊ธฐ์•ผ

์ •๋ง ์ž์ฃผ ์‚ฌ์šฉ๋˜๋‹ˆ๊นŒ ์•Œ์•„๋‘๋ฉด ์ข‹์•„!

โœ…๋ฆฌ์•กํŠธ์—์„œ ๋ฆฌ์ŠคํŠธ ์ถœ๋ ฅ ๋ฐ key ํŠน์„ฑ

๋ฆฌ์•กํŠธ์—์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰์„ ํ•˜๋‹ค๋ณด๋ฉด ๋ฆฌ์ŠคํŠธ๋กœ state๋ฅผ ๋งŒ๋“ค๊ฑฐ๋‚˜, ๋ฆฌ์ŠคํŠธ๋ฅผ ์ถœ๋ ฅํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ •๋ง ๋งŽ์€๋ฐ ๊ทธ๋Ÿด๋•Œ๋Š” ์–ด๋–ค์‹์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๋Š”์ง€, ์ฃผ์˜ํ•  ์ ์€ ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž๊ตฌ

์œ„ ์˜ˆ์ œ์—์„œ initialList ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด์„œ ์ถœ๋ ฅ์„ ํ•˜๋Š” ๋ชจ์Šต์ด์•ผ.

์œ„ ์ฒ˜๋Ÿผ ์ถœ๋ ฅ์„ ํ•ด๋„ ํฌ๊ฒŒ ์ƒ๊ด€์ด ์—†์ง€๋งŒ, ๋‚˜์ค‘์— ๋ฐฐ์—ด์ด ์—„์ฒญ ์ปค์ง„๋‹ค๋ฉด ์ผ์ผ์ด ์ €๋ ‡๊ฒŒ ํ•ด ์ค„ ์ˆ˜์—†์ง€.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ map ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ ๋ฆฌ์ŠคํŠธ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์ง€.

mapํ•จ์ˆ˜๋Š” ๋ฐฐ์—ด์„ ๋Œ๋ฉด์„œ ํ•˜๊ณ ์‹ถ์€ ๋™์ž‘์„ ํ•  ์ˆ˜๊ฐ€ ์žˆ์–ด

์œ„ ์ฝ”๋“œ๋Š” item ์ด๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค ํ•˜๋‚˜ํ•˜๋‚˜์”ฉ ๋Œ ๋•Œ ๋ฆฌ์ŠคํŠธ ์•„์ดํ…œ์„ ๋‹ด์•„์ค„ ๋ณ€์ˆ˜์•ผ

์ด๋ฆ„์€ ์ž๊ธฐ๊ฐ€ ์ง“๊ณ  ์‹ถ์€๋Œ€๋กœ ์ง€์œผ๋ฉด ๋ผ.

์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ์ด ์ž˜ ๋˜๋Š”๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์ง€.

๊ทธ๋Ÿฐ๋ฐ ํ•˜๋‚˜ ๋ฌธ์ œ๊ฐ€ ์žˆ์–ด

์ €๋ ‡๊ฒŒ๋งŒ ์ฝ”๋”ฉ์„ ํ–ˆ๋‹ค๋ฉด ๋ฌด์กฐ๊ฑด ๋œจ๊ฒŒ๋˜๋Š” ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๊ฐ€ ์žˆ์–ด

์œ„ ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€๋Š” ์˜ค๋ฅ˜ ๋ฉ”์„ธ์ง€ ๊ฐ€ ์•„๋‹ˆ์•ผ. ๊ฒฝ๊ณ  ๋ฉ”์„ธ์ง€์ด์ง€. ๋ฌด์‹œ๋ฅผ ํ•ด๋„ ๋™์ž‘์€ ํ•œ๋‹ค๋Š”๊ฑฐ์•ผ

๊ทธ๋ž˜์„œ ๋ฌด์‹œํ•ด๋„ ๋œ๋‹ค? ๋ฌด์‹œํ•ด๋„ ์ƒ๊ด€์€ ์—†์–ด. ๊ทธ๋Ÿผ ์–ด๋–ค ํŽ˜๋„ํ‹ฐ๊ฐ€ ์ฃผ์–ด์ง€๋‹ˆ๊นŒ ์ €๋ ‡๊ฒŒ ๊ฒฝ๊ณ ๋ฅผ ํ•ด์ฃผ๋Š” ๊ฑฐ๊ฒ ์ง€?

ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ mapํ•จ์ˆ˜์•ˆ์— ๋ฐ˜๋ณต๋˜๋Š” ์š”์†Œ์— key props๋ฅผ ์ฃผ๋ฉด ๋ผ

{list.map((item) => {
    return <div key={item.id}>{item.name}</div>;
 })}

์šฐ๋ฆฌ๋Š” div ๊ฐ€ ๋ฐ˜๋ณต์ด ๋˜๋‹ˆ๊นŒ div ์— key props ๋ฅผ ๋ถ€์—ฌํ•œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์–ด.

key๋Š” ๊ณ ์œ ๊ฐ’์„ ๋ถ€์—ฌ๋ฅผ ํ•ด์ฃผ์–ด์•ผ ํ•ด. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” id๊ฐ’์„ ์ค€ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์ง€.

๊ทธ๋Ÿผ key๋Š” ์™œ์ค˜์•ผ ํ•˜๋Š”๊ฑธ๊นŒ?

React๋Š” key ์†์„ฑ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ž์‹๋“ค์ด key๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๋ฉด, React๋Š” key๋ฅผ ํ†ตํ•ด ๊ธฐ์กด ํŠธ๋ฆฌ์™€ ์ดํ›„ ํŠธ๋ฆฌ์˜ ์ž์‹๋“ค์ด ์ผ์น˜ํ•˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์œ„ ๋น„ํšจ์œจ์ ์ธ ์˜ˆ์‹œ์— key๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ํŠธ๋ฆฌ์˜ ๋ณ€ํ™˜ ์ž‘์—…์ด ํšจ์œจ์ ์œผ๋กœ ์ˆ˜ํ–‰๋˜๋„๋ก ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
https://ko.reactjs.org/docs/lists-and-keys.html

๊ณต์‹๋ฌธ์„œ์— ๋‚˜์™€์žˆ๋Š” key ์— ๋Œ€ํ•œ ๊ธ€์ด์•ผ. ํšจ์œจ์ ์œผ๋กœ ๋ Œ๋”๋ง์„ ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ ์กด์žฌํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์•„.

๊ทธ๋Ÿฌ๋ฉด key ๊ฐ’์„ ์–ด๋–ค ๊ฐ’์œผ๋กœ ์ค˜์•ผํ• ์ง€ ๊ฐ์ด ์•ˆ์žกํž ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ

์œ„์— ์˜ˆ์‹œ์ฒ˜๋Ÿผ id ๊ฐ’์„ ๋ถ€์—ฌํ•ด์„œ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๊ณ , ์ตœํ›„์˜ ์ˆ˜๋‹จ์œผ๋กœ ๋ฐฐ์—ด์˜ index ๋ฅผ ์ฃผ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค๊ณ  ํ•ด. ๊ทผ๋ฐ ์š”๊ธฐ์— ๋Œ€ํ•ด์„  ๊ณต์‹๋ฌธ์„œ์—๋Š” ๋ถ€์ •์ ์ธ ์˜๊ฒฌ์ด์•ผ.

์ตœํ›„์˜ ์ˆ˜๋‹จ์œผ๋กœ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ key๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ ํ•ญ๋ชฉ๋“ค์ด ์žฌ๋ฐฐ์—ด๋˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ด ๋ฐฉ๋ฒ•๋„ ์ž˜ ๋™์ž‘ํ•  ๊ฒƒ์ด์ง€๋งŒ, ์žฌ๋ฐฐ์—ด๋˜๋Š” ๊ฒฝ์šฐ ๋น„ํšจ์œจ์ ์œผ๋กœ ๋™์ž‘ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ธ๋ฑ์Šค๋ฅผ key๋กœ ์‚ฌ์šฉ ์ค‘ ๋ฐฐ์—ด์ด ์žฌ๋ฐฐ์—ด๋˜๋ฉด ์ปดํฌ๋„ŒํŠธ์˜ state์™€ ๊ด€๋ จ๋œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ธ์Šคํ„ด์Šค๋Š” key๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐฑ์‹ ๋˜๊ณ  ์žฌ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ธ๋ฑ์Šค๋ฅผ key๋กœ ์‚ฌ์šฉํ•˜๋ฉด, ํ•ญ๋ชฉ์˜ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ์—ˆ์„ ๋•Œ key ๋˜ํ•œ ๋ฐ”๋€” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ๋กœ, ์ปดํฌ๋„ŒํŠธ์˜ state๊ฐ€ ์—‰๋ง์ด ๋˜๊ฑฐ๋‚˜ ์˜๋„ํ•˜์ง€ ์•Š์€ ๋ฐฉ์‹์œผ๋กœ ๋ฐ”๋€” ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children

๊ทธ๋ ‡๋‹ค๊ณ ํ•˜๋„ค.. ์ž์„ธํ•œ ๋‚ด์šฉ๋“ค์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์‚ดํŽด๋ณด๋Š” ๊ฒƒ๋„ ์ข‹์€ ๋ฐฉ๋ฒ•!

์•„, ์š”๊ธฐ์„œ index ๋ž‘ id ๋ž‘ ๋ฌด์Šจ ์ฐจ์ด๋ƒ๊ณ  ํ•  ์ˆ˜๋„ ์žˆ๋Š”๋ฐ ๋‘˜์€ ๋‹ฌ๋ผ.

index๋Š” ๋ฐฐ์—ด์ด ๋งŒ์•ฝ์— ๋ณ€ํ•œ๋‹ค๋ฉด, ์š”์†Œ๋“ค๋งˆ๋‹ค index ๊ฐ’์ด ๋ณ€ํ• ํ…Œ์ง€๋งŒ,

id๊ฐ’์€ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ฃผ์–ด์ง„ ๊ฐ’์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฐฐ์—ด์ด ๋ณ€ํ•œ๋‹ค ํ•˜๋”๋ผ๋„, id๊ฐ’์€ ๊ทธ๋Œ€๋กœ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง ์„ฑ๋Šฅ์— ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์•„.

์š”๊ธฐ๊นŒ์ง€ ์ฝ์—ˆ๋‹ค๋ฉด, ๋ฆฌ์•กํŠธ ์กฐ๊ธˆ ๋‹ค๋ฃฐ ์ค„ ์•ˆ๋‹ค ์ •๋„? ์•„์ง ๋งํ•  ๊ฒƒ์ด ๋งŽ์ง€๋งŒ

๋” ์ด์ƒ ์–˜๊ธฐ๋ฅผ ํ•œ๋‹ค๋ฉด ์ •๋ง์ •๋ง ๊ธธ์–ด์งˆ ๊ฒƒ ๊ฐ™๊ณ  ๋‚˜ ๋˜ํ•œ ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์—

๊ณต๋ถ€๋ฅผ ํ•˜๋Š” ๊ฒธ ์ •๋ฆฌ๋ฅผ ํ•ด๋ดค์”๋‹ˆ๋” ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๊ตฐ์š” ๋‹ค๋“ค๋‹ค๋“ค ํ™”์ดํŒ…~

โœ…๋ฆฌ์•กํŠธ์—์„œ ๊ธฐ์ดˆ์ ์œผ๋กœ ์•Œ์•„์•ผ ํ•˜๋Š” ์ง€์‹๋“ค

  • create-react-app์œผ๋กœ React ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‚˜? (Hello World)
  • ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  import ๋ฐ export๋ฅผ ํ•  ์ค„ ์•„๋‚˜?
  • react hooks๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ• ๊ฑด๋ฐ, ๊ทธ๋Ÿผ react hooks๋Š” ๋ญ๊ณ , class์ปดํฌ๋„ŒํŠธ๋ž‘ function์ปดํฌ๋„ŒํŠธ์˜ ์ฐจ์ด๋ฅผ ์•„๋‚˜?
  • react hooks๋กœ state๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ฐ”๊ฟ€ ์ค„ ์•„๋‚˜?
  • ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฒคํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€ ์•„๋‚˜?
  • react hooks๋กœ props๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ค„ ์•„๋‚˜?
  • react์—์„œ ์Šคํƒ€์ผ๋ง์„ ์–ด๋–ป๊ฒŒ ํ•˜๋Š”์ง€ ์•„๋‚˜?
  • ๊ฐ์ข… react ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๋‹ค์šด๋ฐ›๊ณ  ์‚ฌ์šฉํ•  ์ค„ ์•„๋‚˜?
  • ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง๋ฅผ ํ•  ์ค„ ์•„๋‚˜?
  • ๋ฆฌ์ŠคํŠธ์™€ key๋ฅผ ๋‹ค๋ฃฐ ์ค„ ์•„๋‚˜?
profile
๊ฐœ์ธ๋ธ”๋กœ๊ทธ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. https://junghyeonsu.com/

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