2021. 10. 2. 08:00ใFront-End ์์ ์ค/Vue.js
๐ 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 ์ค์ค๋ก ๊ด๋ฆฌํด์ผ ํ๋ ๊ฒ
์ฃผ๋ํ๋์ ๊ธ์ด ๋ง์์ ๋์ จ๋์? ๊ตฌ๋ ๊ณผ ๊ณต๊ฐ! ๊ทธ๋ฆฌ๊ณ , ๋๊ธ ๊ทธ๋ฆฌ๊ณ ๋ฐฉ๋ช ๋ก์ ์ฃผ๋ํ๋์๊ฒ ๋ง์ ํ์ด ๋ฉ๋๋ค.
'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 |