๋ ํ๋ฒ ๋ฐฐ์์ ๊ธฐ์จ์ ๋๊ผ๋ ์๊ฐ์ด๋ค. ์ด๊ฒ์ ๊ตฌํํ๊ธฐ ์ํด ์ ๊ทํํ์์ ์๋ก ๊ณต๋ถํ์๊ธฐ ๋๋ฌธ์ด๋ค.
TIL015_์ ๊ทํํ์์๋ ๊ธฐ๋กํ๋ฏ์ด ์ด๋ ค์๋ง ๋ณด์๋ ์ ๊ทํํ์์ ๊ณต๋ถํ๊ณ ๋๋ ์ฌ๋ฌ ๋ฌธ์์ด ์กฐ๊ฑด๋ค์ ๊ฐ๋จํ๊ฒ ํํํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๊ธด๊ฒ์ด๋ค.
์์ผ๋ก๋ validation checkํ ๋๋ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ ๋ ์ ์ฉํ๊ฒ ์ธ ๊ฒ ๊ฐ๋ค.
์ฌ๊ธฐ์์ ์ ๋ ฅ์ฐฝ์ ์ด 2๊ฐ๋ค. ์ฌ์ฉ์์ด๋ฆ/์ด๋ฉ์ผ์ฃผ์/์ ํ๋ฒํธ ์ ๋ ฅ์ฐฝ ๊ทธ๋ฆฌ๊ณ ๋น๋ฐ๋ฒํธ ์ ๋ ฅ์ฐฝ.
๊ฐ๊ฐ์ ํจ์๋ก ๊ตฌํํ์ฌ state๋ฅผ ๋ณ๊ฒฝํ๋๋ก ํ ์ ์๊ฒ ์ง๋ง ์ฝ๋๋ฅผ ์์ฑํ๋ค๋ณด๋ ์ค๋ณต์ ์ผ๋ก ์ฌ์ฉํ๊ณ ์๋ ๋๋์ด ๋ค์๋ค.
์ด์ฌํ ๊ตฌ๊ธ๋ง์ ํด๋ณด๋..์ญ์๋..๋ฆฌ์กํธ๋ ๋๋ํ๋ค!!
๋จผ์ ๊ฐ๊ฐ input tag์ name attribute์ state์ key ๊ฐ์ ํ ๋นํ๊ณ
์ด๋ฏธ ์ ํด์ง key๊ฐ ์๋๋ผ runtime์ผ๋ก ์ํ๋ key๋ฅผ ๋ฐ์์ค๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ computed property name(MDN ์ฐธ๊ณ )์ผ๋ก ๊ฐ๋จํ๊ฒ ์ฝ๋๋ฅผ ์ค์ผ ์ ์๋ค.
Destructuring(๊ตฌ์กฐ๋ถํดํ ๋น)์ผ๋ก ์๋์ ๊ฐ์ด ๋๋๋๋ ๊ฐ๋จํ๊ฒ ํํํ ์ ์๋ค.
validation ์กฐ๊ฑด์ ์ถฉ์กฑํ์์ผ๋ฉด ์๊ฐ์ ์ผ๋ก ๋ก๊ทธ์ธ ๋ฒํผ ํ์ฑํ๋ฅผ ๋ณด์ฌ์ค์ผํ๋ค.
์ฒ์์๋ ๊ฐ ์กฐ๊ฑด์ด ์ถฉ์กฑ๋๋ฉด state์ id, password status๊ฐ false์์ true๋ก ๋ฐ๋๋๋ก ๋ณ๊ฒฝํ๊ณ ์ด ๊ฐ์ ๋ถ๋ฌ์์ ๋ก๊ทธ์ธ ๋ฒํผ์ ํ์ฑํ ์์ผฐ๋ค.
๊ทธ๋ฐ๋ฐ ์ฌ๊ธฐ์ ๋ฌธ์ ๋ฅผ ํ๋ ๋ฐ๊ฒฌํ์๋ค.
๋ถ๋ช ํ ๋น๋ฐ๋ฒํธ์ด 6๊ฐ๋ถํฐ true๊ฐ์ด ๋์ด์ผ ํ๋๋ฐ ๋ฒํผ ํ์ฑํ์ ๋นํ์ฑํ๊ฐ ๋ด๊ฐ ์ค์ ํ ์กฐ๊ฑด๋ณด๋ค ๋ฆ์ ๊ฒ์ด๋ค.
๊ทธ๋ฌ๋ค ์๊ฒ๋ ์ปดํฌ๋ํธ์ ์กฐ๊ฑด! React๋ก ์ฌ๊ณ ํ๊ธฐ์์ ๊ธฐ๋กํ๋ฏ์ด, ์ปดํฌ๋ํธ ์์ ๋ค๋ฅธ state๋ props๋ฅผ ๊ฐ์ง๊ณ ๊ณ์ฐ ๊ฐ๋ฅํ ๊ฒฝ์ฐ๋ state๊ฐ ์๋ ๊ฒ์ด๋ค.
๊ทธ๋ฆฌ๊ณ ์ ๋ง ์ค์ํ ๊ฐ๋ ์ด์๋ ์ด๊ฒ!
state๋ก ๊ฐ์ ๋ด์ ์ฌ์ฉํ๋ฉด, setState๋ ๋น๋๊ธฐ์ ์ด๊ธฐ ๋๋ฌธ์ ๋น๋๊ธฐ์ ์ธ setState์ ๋๊ธฐ์ ์ธ ์ด๋ค ํจ์๋ฅผ ๊ฐ์ด ์์ฑํ๋ฉด ํจ์๊ฐ ๋จผ์ ์คํ๋์ด ๋๋ ์ด๊ฐ ๋๋ ๊ฒ์ฒ๋ผ ๋ณด์๋ ๊ฒ๋ ํ์ธํ๊ฒ ๋์๋ค.
์์ ๊ฐ์ด ๋ก๊ทธ์ธ ๋ฒํผ ํ์ฑํ์ ์กฐ๊ฑด์ด ์ถฉ์กฑํ ์ง ์ฌ๋ถ๋ฅผ ๊ธฐ์กด state ๊ฐ์ ๋ถ๋ฌ์์ ๊ณ์ฐํ๋ ํจ์๋ก ๋ฐ๋ก ๊ตฌํํ๋ฉด, state์ true/false๋ฅผ ์ ์ฅํ๊ณ ๊ทธ ๊ฐ์ ๋ถ๋ฌ์์ ๋ก๊ทธ์ธ ๋ฒํผ ํ์ฑํ์ ์ฌ์ฉํ ํ์๊ฐ ์๋ ๊ฒ์ด๋ค.
์ค๋ณต๋ฐฐ์ ์์น์ ๋ช ์ฌํ๊ณ state์ ์ต์ ์งํฉ์ ๋ง๋ค์!
๊ฐ๋จํด ๋ณด์ด๋ ์ด ํ์ด์ง์์๋ ์ ๋ง ๋ง์ ๊ฒ์ ๋ฐฐ์ ๋ค.
์ฌ์ฉ์ ๋์๋ ๊ทธ์ ๊ทธ๋ ๋ณด์ด๋..์ฌ์ง์ด ์ฌ์ฉ์๋ ์์ ์ฐจ๋ฆฌ์ง๋ ๋ชปํ๋ ์ฌ๋ฌ ๊ธฐ๋ฅ๋ค์ ๊ตฌํํ๊ธฐ ์ํด ์ผ๋ง๋ ๋ง์ ๊ฐ๋ฐ์๋ค์ด ์ํผ์ ๊ฐ์ ๋ฃ์์๊น ๋ฌธ๋ ์๊ฐํ๊ฒ ๋์๋ค.
๋ฆฌ์กํธ ์ฒ์ฌ๊ฐ ๋๊ณ ์ถ๋ค.
๋ค์ํ ๊ธฐ๋ฅ์ ๋๋ฑ ๋๋ฑ ๋ง๋ค์ด ๋ด๊ณ ์ถ๋ค.