๐ 2022๋
6์ 16์ผ (์ ๋ฆฌ ํ์)
2์ฃผ ๋์ ์งํ Westagram ํ๋ก์ ํธ๋ฅผ ๋ฉํ ๋์ด ๋ฆฌ๋ทฐํด์ฃผ์๋ ์๊ฐ์ ๊ฐ์ก๋ค.
๐ ๊ณตํต ์์ ์ฌํญ
- ํจ์๋ ํ ๊ฐ์ง ์ก์
๋ง ํ๋ ๊ฒ์ด ์ข๋ค
- ํจ์ ์ด๋ฆ์ action verb
- state๋ฅผ ์ค์ผ ์ ์๋์ง ๋ณด๊ธฐ
- state ์ฑ๊ฒฉ์ ์ดํด๋ณด์
- ์ ์ง๋ณด์๋ฅผ ์ค์ด๊ธฐ ์ํด์ ์ง๊ด์ ์ผ๋ก ๋ณ์, ํจ์๋ช
์ ์ ํํ๊ฒ ์ ๋ฌํ๋์ง
- ๊ฐ๋
์ฑ & ์๋ฏธ์ ๋ฌ ์ค์
- ๋ฐฐ์ด๊ณผ ๊ฐ์ฒด๋ ๋ถ๋ณ์ฑ์ด๋ผ๋ ๊ท์น ๊ฐ์ง๊ณ ์๋ค ๊ทธ๊ฒ์ ์งํค๊ธฐ ์ํด์. ๋ฌด์กฐ๊ฑด ๋ณต์ฌํด์ ๋ค๋ฃฌ๋ค. [...] ํน๋ณ
- onChange
- setState ํจ์ => ๋น๋๊ธฐ ๊ฐ๋
- setUserInfo: ํจ์์ฉ update
- setState ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ์์ด ์๊ณ ํจ์ํ ์
๋ฐ์ดํธ๊ฐ ์๋ค. ํจ์ํ ์
๋ฐ์ดํธ๋ ๋ด๊ฐ ์
๋ฐ์ดํธ ํ๋ ๊ฐ์ด ์ด ์ ์ํ๊ฐ์ด๋ ์ฐ๊ด์ด ์๋ ์๋๋ ๊ด๋ จ ์์ (ํจ์ํ ์
๋ฐ์ดํธ <-> ๊ธฐ๋ณธ์ ๋ฐฉ์)
์) ์ฝ๋ฉํธ๋, ์ ์ ๊ฐ์ ํ์ฌ ๊ฐ๊ณผ ๊ด๋ จ์ด ์์ง. ๊ทผ๋ฐ ๋ก๊ทธ์ธ ์ธํฌ๋ ์ด์ ๊ฐ์ด๋ ๊ด๋ จ์ด ์์ผ๋๊น ํจ์ํ ์
๋ฐ์ดํธ๋ฅผ ์จ์ผ์ง
- @mixin(CSS ์ฌ์ฉ)
์ฝ๋ฉํธ ๋ฆฌ์คํธ ๊ฐ์ ๊ฒฝ์ฐ์๋ ๊ทธ๋ฅ ๋ฐฐ์ด์ด ์ข๊ณ , ID & password๋ ๊ฐ์ฒด๊ฐ ์ข๋ค. ๋ฐ์ดํฐ์ ์ฑ๊ฒฉ์ ์๊ฐํด๋ณด์.
์) ์ํ ๋ฆฌ์คํธ๊ฐ A, B, C๊ฐ ์๋ค ๊ทธ๋ผ ๋ฐฐ์ด [A, B, C]
์ํ ์์ธ์ ๋ณด๋ ๊ฐ์ฒด {SKU: 14984, color: white, }
๊ธฐ์กด form์ด ์๊ณ values๋ง ๋ฐ๊พธ๋ ๊ฑฐ๋ฉด ๊ฐ์ฒด ์ฌ์ฉ, form ์์ด ์๋ก์ด ๋ฐ์ดํฐ๊ฐ ์ถ๊ฐ ๋๋ฉด ๋ฐฐ์ด
## ๐ ๊ฐ์ธ ์์ ์ฌํญ