state๊ฐ ์ ๋ฐ์ดํธ๋ ๋ ๋ง๋ค ๋ ๋๋ง์ด ์๋กญ๊ฒ ๋๋ค๊ณ ํ๋๋ฐ ๋ง์ฝ ์๋์ ๊ฐ์ด ์ปดํฌ๋ํธ๊ฐ ๋งจ ์ฒ์ ๋ ๋๋ง๋ ๋ state๋ฅผ ์ ๋ฐ์ดํธํ๋ ์ํฉ์ด๋ฉด ์ด๋ป๊ฒ ๋ ๊น์?
React์ ์ปดํฌ๋ํธ์์ ๊ด๋ฆฌํ๋ ๋ฐ์ดํฐ๋ก ํฌ๊ฒ Props ์ State ๊ฐ ์๋ค. ์ด ๋์ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ ๋ ์ฌ์ฉํ๋ ๊ฐ๋ ์ผ๋ก ๊ต์ฅํ ์ค์ํ๋ฏ๋ก ๊ผญ ์๊ณ ์์ด์ผ ํ๋ค.
React ํ๋ก์ ํธ๋ฅผ ์ฒ์ ๋ง๋ค์์ ๋ ๋ณด์ด๋ index.html ํ์ผ. ํ๊ทธ ์์ ์๋ฌด ๊ฒ๋ ์๋ค.
React์ ํต์ฌ ๊ฐ๋ ์ ๋ฐ๋ก Component(์ปดํฌ๋ํธ)์ด๋ค. ์ปดํฌ๋ํธ๋ UI๋ฅผ ํํํ๋ ์์๋ก React์์ ์ ๋ง ๋ง์ด ์ฌ์ฉ๋๋ค. UI ์์๋ค์ ์๊ฐ ์ชผ๊ฐ์ ์ปดํฌ๋ํธ๋ก ๋ง๋ค๊ณ ํ์ด์ง์์ ์ปดํฌ๋ํธ๋ฅผ ํฉ์น๋ ๊ฐ๋ ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค.์ทจ๋ฏธ ๊ณต์ ํ๋ซํผ, ํด๋์ค 101 ์น๋
ํ๋ก์ ํธ ํด๋(grab-market-web)๋ฅผ ํ๋ ๋ง๋ ํ VSCode์์ ํด๋น ํด๋๋ฅผ ์ด์ด์ค๋ค.react ํ๋ก์ ํธ๋ฅผ ์์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๋ ๋๊ตฌ create-react-app ์ ์ค์นํด์ค๋ค. ์ด๋ npm์ ํตํด์ ๊ด๋ฆฌ๋๋ ํจํค์ง๋ค. ํฐ๋ฏธ๋์ ์ฌ๋ ๋จ์ถํค๋ ctrl + j
์ฒ์์ javascript๋ ๋ธ๋ผ์ฐ์ ์์๋ง ์คํ๋๋ ์ธ์ด์์ต๋๋ค. javascript๋ฅผ ์ฝ๊ณ ์คํ์ํค๊ธฐ ์ํด ๋ธ๋ฌ์ฐ์ ๋ค์ ์๋ก ๋ค๋ฅธ ์์ง(์ฝ๋ ์ธํฐํ๋ฆฌํฐ)์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ ์ javascript๊ฐ ๋๋ฆฌ ์ฌ์ฉ๋๋ฉด์ '์น ๊ฐ๋ฐ ๋ง๊ณ ๋ค๋ฅธ ๊ณณ์์๋ ์ฌ์ฉํ ์ ์์ง ์
์น์ ๋ง๋ค๊ธฐ ์ํด์ HTML, CSS, JS๋ฅผ ์ด์ฉํด์ผ ํฉ๋๋ค. ๋ณดํต ์๋์ ๊ฐ์ด ํ์ด์ง ๋ณ๋ก ์ฝ๋๋ฅผ ์ง๊ฒ ๋์ฃ .๊ทธ๋ฌ๋ ์ ์ ์น์ด ๋ณต์กํด ์ง๋ฉด์ ๋ ๋ง์ html, Javascript๊ฐ ๋ค์ด๊ฐ๊ฒ ๋ฉ๋๋ค. ์ ์ ํ๋์ html ํ์ผ์ ์๋ง์ Javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๋ณ์ ์ ์ธ : let, const๋น๋๊ธฐ ์ฒ๋ฆฌ : PromiseES6 ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ฉด ์ค์ ๋ก ๋ ํธํ๊ฒ ์ฝ๋ฉ์ ํ ์ ์์ต๋๋ค. ๋๋ถ๋ถ์ ๋ฉ์ด์ ธ ๋ธ๋ผ์ฐ์ , Node.js ์๋ฒ ๊ฐ๋ฐ ๋ฑ ๋ค์ํ ๋ถ์ผ์์ ES6 ๋ฌธ๋ฒ์ ์ฑํํ๊ณ ์์ด์. ์ผ๋ฐ์ ์ผ๋ก string ์๋ฃํ์ ์กฐํฉ
Promis๋ ๋น๋๊ธฐ์ฒ๋ฆฌ๋ฅผ ์ํํ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ ๋ฐ๊ณ resolve, reject ๋ ํจ์๋ฅผ ์ธ์๋ก ์ ๋ฌ ๋ฐ๋๋ค..then : ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์ฑ๊ณตํ์ ๋ ํธ์ถ.catch : ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ์คํจ ํ์๋ ํธ์ถ.finally : ์ฑ๊ณต,์คํจ ์ฌ๋ถ ์์ด ๋ฌด์กฐ๊ฑด ํ ๋ฒ
ํ๋ผ๋ฏธํฐ๋ก ํจ์๋ฅผ ์ ๋ฌํ๋ ํจ์์ฝ๋ฐฑํจ์๋ ํ๋ผ๋ฏธํฐ๋ก ํจ์๋ฅผ ์ ๋ฌ๋ฐ์, ํจ์์ ๋ด๋ถ์์ ์คํํ๋ ํจ์์ด๋ค.์ฝ๋ฐฑํจ์๋ ์ด๋ฏธ ์ฐ๋ฆฌ์ ์ฝ๋ ์์์ ์์ฃผ ์ฌ์ฉ๋๊ณ ์๋ค.์๋ฅผ ๋ค์ด, forEach ํจ์์ ๊ฒฝ์ฐ ํจ์ ์์ ์ต๋ช ์ ํจ์๋ฅผ ๋ฃ์ด์ forEach ๋ฌธ์ ๋์์ํจ๋ค.
์ผ๋ฐ ํ ์คํธ ๊ธฐ๋ฐ์ ๊ฒฝ๋ ๋งํฌ์ ์ธ์ด๋ค. ์ผ๋ฐ ํ ์คํธ๋ก ์์์ด ์๋ ๋ฌธ์๋ฅผ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ฉฐ, ์ผ๋ฐ ๋งํฌ์ ์ธ์ด์ ๋นํด ๋ฌธ๋ฒ์ด ์ฝ๊ณ ๊ฐ๋จํ ๊ฒ์ด ํน์ง์ด๋ค. HTML๊ณผ ๋ฆฌ์น ํ ์คํธ(RTF) ๋ฑ ์์ ๋ฌธ์๋ก ์ฝ๊ฒ ๋ณํ๋๊ธฐ ๋๋ฌธ์ ์์ฉ ์ํํธ์จ์ด์ ํจ๊ป ๋ฐฐํฌ๋๋ READ