๋ง์ฝ ๊ธฐ๋ฅ ๋ถ๋ถ(Javascript)๊ณผ UI ๋ถ๋ถ(HTML)์ ์ฝ๋๋ฅผ ํ ํ์ด์ง์ ํ๋ฒ์ ์ ๋๋ค๋ฉด ๋ฌธ์ ๊ฐ ๋ฌ์ ๋ ๋ชจ๋ ๋ถ๋ถ์ ์ฝ๋๋ฅผ ๋นํจ์จ์ ์ผ๋ก ๋ค ๊ฒํ ํด์ผ ํ๋ค๋ ๋ถํธํจ์ด ์๋ค.
๊ทธ๋ฌ๋ฏ๋ก ๊ธด ์์ค์ฝ๋๋ฅผ JS๋ถ๋ถ(๊ธฐ๋ฅ ๋ถ๋ถ)๊ณผ JSX๋ถ๋ถ(UI ๋ถ๋ถ)์ผ๋ก ๋๋์ด ์ฃผ๋ฉด ์์ ํ๊ธฐ ํจ์ฌ ํธํด์ง๋ค.
์ด๋ ๊ฒ ๊ธฐ๋ฅ ๋ถ๋ถ์ ๋ฐ๋ก Container ํ์ผ๋ก ๋๋๊ณ , UI ๋ถ๋ถ์ Presenter ํ์ผ๋ก ๋๋์ด ์ค๋ค. ๊ทธ๋ฌ๋ฉด ๊ธฐ๋ฅ์ด ์๋์ ์ํ๋ค๋ฉด ์ปจํ
์ด๋ ๋ถ๋ถ์ ๋ณด๋ฉด ๋๊ณ
UI๊ฐ ์ด์ํ๋ค ์ถ์ผ๋ฉด ํ๋ ์ ํฐ ๋ถ๋ถ์ ๋ณด๋ฉด ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋์ ์คํํ ๋๋ ํ๋์ ํ์ผ๋ก ํฉ์น๋ฉด ๋๋ค.
๊ทธ๋ ๋ค๋ฉด ๋ฐฉ๋ฒ์ ์์๋ณด์.
๋จผ์ ์ปจํ ์ด๋์ ํ๋ฆฌ์ ํฐ๋ฅผ ๋๋์ด ๋ณด์.
ํ๋ ์ ํฐ ํ์ด์ง๋ฅผ export ํ๊ธฐ ๋๋ฌธ์ ์ปจํ ์ด๋์์ import ํด์ ์ธ ์ ์๋ค. import ํ ํ๋ ์ ํฐ๋ฅผ return ๋ถ๋ถ์ ์ ์ด์ค๋ค. ์ด๋ฌ๋ฉด ํ๋๋ก ํฉ์ณ์ ธ์ ์คํ์ด ๋ ์ ์๋ค.
์ด๋ import ํด ์จ ์ปดํฌ๋ํธ๋ฅผ ์์ ์ปดํฌ๋ํธ๋ผ๊ณ ํ๊ณ ๋ถ๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ผ๊ณ ํ๋ค.
props๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ์์์ปดํฌ๋ํธ์๊ฒ ๋ฌผ๋ ค์ฃผ๋ ๋ณ์๋ ํจ์๋ฅผ ๋งํ๋ค.
props๋ผ๋ ๊ฐ์ฒด๊ฐ ์๊ธด๋ค. ์์ ๊ฒ์ด key๊ฐ ๋๊ณ ๋ค์ ๊ฒ์ด value ๊ฐ ๋์ด ์์ ์ปดํฌ๋ํธ๋ก ๋์ด๊ฐ๊ฒ ๋๋ค.
props = {aaa : handleChangeWriter}
์์ ์ปดํฌ๋ํธ์ธ ํ๋ ์ ํฐ์์๋ props.aaa
๋ผ๊ณ ์ ์ด์ ์ฌ์ฉํ ์ ์๋ค.
๋ฆฌ์กํธ์์ ์์์ด ๋ถ๋ชจ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๋ ๋ฐฉ๋ฒ์ ์๋ค.
๋ฆฌ์กํธ์ ๋ฐ์ดํฐ์ ํ๋ฆ์ ๋จ๋ฐฉํฅ์ด๋ผ๋ ๊ฒ์ ์ ์ ์๋ค.
์ด์ฒ๋ผ ๋จ์๋ณ๋ก ์ปดํฌ๋ํธ๋ก ๋๋์ด ์์ ์ ํ๋ค๋ฉด ๋ถํํํด์ ์์ ํ๊ธฐ ์ฌ์ ์์ ๋ฐ ์ฌ์ฌ์ฉ์ด ์ฌ์์ง๋ค.
์ด๋ฐ์์ผ๋ก ํด๋ ๊ตฌ์กฐ๋ฅผ ์ฒด๊ณํํด์ ์์ ํ๋ฉด ์ข๋ค.
setState๊ฐ ์ผ์ด๋ ๋๋ง๋ค ํ์ด์ง๊ฐ ๋ค์ ๋ ๋๋ง ๋๋ค(๋ฆฌ๋ ๋).
๊ทธ๋์ let์ผ๋ก ํ๋ค๋ฉด ํ๋ฉด์ ๋ฐ์์ด ์๋๋ ๊ฒ์ด๋ค.
๊ทธ๋ฐ๋ฐ ํ๋ฒ setState๊ฐ ์ผ์ด๋ ๋๋ง๋ค ๋ฆฌ๋ ๋ ๋๋ค๋ฉด ๋๋ฌด ๋นํจ์จ์ ์ด๊ณ ์ฑ๋ฅ์ ๋ฌธ์ ๊ฐ ์๊ธธ ๊ฒ์ด๋ค. ๊ทธ๋์ ๋ฆฌ๋ ๋๋ฅผ ์ต์ํ ํ๊ธฐ ์ํด์ ์ฒ์๋ถํฐ ๋ฆฌ๋ ๋๋์ง ์๊ณ ๋ง์ง๋ง๊น์ง ์์ ๋ฆฌ๋ ๋๊ฐ ๋๋ค.
๊ทธ๋์ ์์ฑํ๋ ๊ฒ ๋ณด๋ค ํ๋ ๋๋ฆฌ๊ฒ ์๋ํ๋ค.
state๋์ event.target.value
๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์์ฑ๊ณผ ๋ ๋๋ง์ด ๊ฐ์ด ์ผ์ด๋๊ฒ ๋ฐ๊ฟ ์ ์๋ค.