[React] State์™€ Props์˜ ์ฐจ์ด

2021. 10. 2. 08:00ใ†Front-End ์ž‘์—…์‹ค/Vue.js

728x90
๋ฐ˜์‘ํ˜•

๐Ÿ“Œ Props


Props๋Š” Properties์˜ ์ค„์ž„๋ง๋กœ State์™€์˜ ๊ฐ„๋‹จํ•œ ์ฐจ์ด๋Š” ๋ณ€ํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ์ด์—์š”.

์ž๋ฐ”๋กœ ๋”ฐ์ง€๋ฉด final์ด ๋ถ™์€๊ฑฐ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”? ์ฃผ๋‹ˆํ•˜๋ž‘์€ Back End ์„ฑํ–ฅ์ด ๊ฐ•ํ•œ ๊ฒƒ์ด์—์š”!

Component๋Š” ์ƒ์†ํ•˜๋Š” ๋ถ€๋ชจ Component๋กœ ๋ถ€ํ„ฐ props๋ฅผ ๋ฐ›๊ณ  ์ด props๋Š” ์ƒ์† ๋ฐ›์€ Component ๋‚ด์—์„œ ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฒƒ์ด์—์š”. React์—์„œ๋Š” '๋ถ€๋ชจ > ์ž์‹'์˜ ์ผ๋ฐฉํ–ฅ์„ฑ ์ƒ์†์ด๋ผ๋Š” ํŠน์ง• ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

props๋Š” Component๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋‹ค์–‘ํ•œ ๊ฐ’์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ์กด์žฌ๋กœ 'this.props.~~~'๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ์ด์—์š”.

๋ถ€๋ชจ Component๊ฐ€ ์ž์‹ Componentํ•œํ…Œ ์ „๋‹ฌํ•˜๋Š” Data(์ž์‹ ์ž…์žฅ)๋กœ ์ฝ๊ธฐ ์ „์šฉ์ธ ๊ฒƒ์ด์—์š”.

<Child value = "value" />

 

 

๋ฐ˜์‘ํ˜•

 

 

๐Ÿ“Œ State


 

 

State๋Š” Component์˜ ์ƒํƒœ๋กœ ๋ณด๋ฉด ๋˜๊ณ , props์™€ ๋ฐ˜๋Œ€๋กœ ๋ณ€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

Component์˜ ๋‚ด๋ถ€์—์„œ ์„ ์–ธ ๋˜๊ธฐ ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

์Œ.. ์ž๋ฐ”๋กœ ์น˜๋ฉด Setter๊ฐ€ ์žˆ๋Š” ๋ฉค๋ฒ„ ๋ณ€์ˆ˜์ผ๊นŒ์š”??

์ด๋Ÿฌํ•œ state๋Š” ์™ธ๋ถ€์— ๊ณต๊ฐœํ•˜์ง€ ์•Š๊ณ , Component ์Šค์Šค๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด์—์š”. state๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ Component์˜ ์ƒํƒœ๊ฐ’์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ๊ฒƒ๋“ค (List์—์„œ ์„ ํƒ๋œ ๊ฐ’, ์ฒดํฌ๋ฐ•์Šค์—์„œ ์ฒดํฌ๋œ ๊ฐ’, ํ…์ŠคํŠธ ๋ฐ•์Šค์˜ ํ…์ŠคํŠธ ๋“ฑ๋“ฑ)์ธ ๊ฒƒ์ด์—์š”.

 

  • ์ƒํƒœ์— ๋”ฐ๋ผ ๋ณ€ํ™”ํ•˜๋Š” ๊ฒƒ
  • ์ง์ ‘ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ
  • state๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด Component๋ฅผ Re Rendering
  • ์™ธ๋ถ€์—๋Š” ๋น„๊ณต๊ฐœ, Component ์Šค์Šค๋กœ ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ

 

 

 


 

์ฃผ๋‹ˆํ•˜๋ž‘์˜ ๊ธ€์ด ๋งˆ์Œ์— ๋“œ์…จ๋‚˜์š”? ๊ตฌ๋…๊ณผ ๊ณต๊ฐ! ๊ทธ๋ฆฌ๊ณ , ๋Œ“๊ธ€ ๊ทธ๋ฆฌ๊ณ  ๋ฐฉ๋ช…๋ก์€ ์ฃผ๋‹ˆํ•˜๋ž‘์—๊ฒŒ ๋งŽ์€ ํž˜์ด ๋ฉ๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•

'Front-End ์ž‘์—…์‹ค > Vue.js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Reacte] Event setState ํ•จ์ˆ˜  (0) 2021.10.02
[React] ์ด๋ฒคํŠธ state props ๊ทธ๋ฆฌ๊ณ  render ํ•จ์ˆ˜ ๊ฐ•์˜  (0) 2021.10.02
[React] State  (0) 2021.09.27
[React] Component File ๋ถ„๋ฆฌ  (0) 2021.09.26
[React] Props  (0) 2021.09.25