State React์์ "์ํ(state)"๋ ์ปดํฌ๋ํธ์ ํ์ฌ ์ํ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด๋ฅผ ์๋ฏธํฉ๋๋ค. ์๊ฐ์ด ์ง๋๋ฉด์ ๋ณ๊ฒฝ๋ ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ณ ๊ด๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ๋๋ฉฐ, ์ปดํฌ๋ํธ์ ๋์์ ์ํฅ์ ์ค ์ ์์ต๋๋ค. ๋ค์ ๋งํด, ์ปดํฌ๋ํธ์ ์ํ๋ ๊ทธ๊ฒ์ ๋ฉ๋ชจ๋ฆฌ์ฒ๋ผ
Header Tag๋ฅผ ๋จผ์ ๋ณด์ onChangeMode๊ฐ ๋ฐ์ํ์ ๋ alert ํ๋ฉด์ ๋์ด๋ค.preventDefault()๋ onClick์ ํ๋๋ผ๋ ํ๋ฉด์ ์๋ก๊ณ ์นจ์ ๋ง์์ค๋ค.props.onChangeMode()๋ Header Tag์ onChangeMode()ํจ์
React์์ props(์์ฑ)์ ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. JavaScript์ ํจ์ ์ธ์์ ์ ์ฌํ๋ฉฐ, ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ์ฌ ์ปดํฌ๋ํธ์ ๋์ ๋ฐ ๋ชจ์์ ์ฌ์ฉ์ ์ ์ํ ์ ์๊ฒ ํฉ๋๋ค.props๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๋ถ๋ถ์์๋ ์ฌ์ฉํ ์ ์
์ฌ์ฉ์ ์ ์ ํ๊ทธ๋ก ์ข๋ ๊ตฌ์กฐ๋ฅผ ์์ํ๊ฒ ๋ณผ์ ์๋๋ก ๋์์ ์ค๋ค.
APP ํ๋กํผํฐ(ํจ์)๋ฅผ root๋ผ๋ id๋ฅผ ๊ฐ์ง ๊ณณ์ ๋๋๋ง ํด๋ผ.์ฐ๋ฆฌ๊ฐ ์ฃผ์์ ์ผ๋ก ๊พธ๋ฏธ๊ฒ ๋ ๊ณณ.npm run buildreact ๋ ๊ฐ๋ฐํ๊ธฐ ์ข์ง๋ง ๋ฐฐํฌํ ๋ ์ฉ๋์ด ๋๋ฌด ํฌ๊ณ ์ข์ง์๋ค. npm run build๋ฅผ ํ๋ฉด ๋ฐฐํฌํ๊ธฐ ์ข๊ฒ ํ์ผ์ ๋ง๋ค์ด์ค๋ค.๊ฒฐ๊ณผ๋ฌผ ์คํ
react ๊ฐ๋ฐํ๊ฒฝ ๊ตฌ์ถํ๊ธฐ ๊ฐ๋จํ react ๊ตฌ์ถ๋ฐฉ๋ฒ์ ์๊ฐํ๋ค.stackblitz.com ๊ตฌ์ถํ์ง ์๊ณ ์น์์ ๊ฐ๋จํ๊ฒ ์ค์ต๊ฐ๋ฅCreate React Appnode.js ์ค์นํ๊ธฐ (๊ฐ๋ฅํ ์ต์ ๋ฒ์ )๊ตฌ์ถํ ํ์ผ์์ ๋ค์ด๊ฐ์ ํฐ๋ฏธ๋์ ์น๋ธ๋ผ์ฐ์ ์ ์ํ ๋ฆฌ์กํธ ์ฑ์ด ๋ธ.