React์์๋ input์ ์ ๋ ฅ๋ ๊ฐ์ ์ด๋ป๊ฒํ๋ฉด ๊ฐ์ ธ์ฌ ์ ์์๊น? > inputํ๊ทธ์ ๊ฐ์ ์ ๋ ฅํ๋ฉด state์ ์๋ก์ด ๊ฐ์ฒด๊ฐ์ ํ๋ ์ถ๊ฐํ๋ ๋ก์ง์ ๊ตฌํํ๊ณ ์์๋๋ฐ inputํ๊ทธ์ ๊ฐ์ ์ป์ด์์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผ ์ค์ด์๋ค. > > DOM์์๋ input์
state์ ๋ฐฐ์ด์์ ๊ฐ์ฒด๋ค์ ๋ด๊ณ ์๋ ๊ฐ์ map์ ์ด์ฉํด์ ๊ฐ๊ฐ์ liํ๊ทธ๋ค๋ก ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ณผ์ ์์ ํ ๊ฐ์ง ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค.์๋์ ๊ฐ์ ์ค๋ฅ๊ฐ ๋ฐ์ํ์๋๋ฐ ์ฌ๊ธฐ์ ์๋ฌ ๋ฌธ๊ตฌ๋ฅผ ์ ์ดํด๋ณด๋ฉด, ๋ฆฌ์คํธ์์๋ ๊ณ ์ ํ key๋ฅผ ์ฌ์ฉ ํด์ผ ๋๋ค! ๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๋
๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํด์ ํ๋ก์ ํธ๋ฅผ ํ๋ ์งํํด ๋ณผ ๊ฒ์ด๋ค.์ ์ฒด ์ต๊ด์ ๊ฐ์๋ฅผ ์ ์ ์๋ค.์ฌ์ฉ์๊ฐ ์ ๋ ฅ์ฐฝ์ ์ ๋ ฅํ ๋ค ์ถ๊ฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ํ๋์ ์ต๊ด์ ๋ชฉ๋ก์ ์ถ๊ฐํ๋ค.๊ฐ๊ฐ์ ๋ชฉ๋ก์ ์ถ๊ฐํ๊ณ , ๊ฐ์์ํฌ ์ ์๋ค.๊ฐ๊ฐ์ ๋ชฉ๋ก์ ์ญ์ ํ ์ ์๋ค.Reset ๋ฒํผ์ ๋๋ฅด๋ฉด ๋ชจ๋
๋ฆฌ์กํธ๋ ๊ฐ๊ฐ์ ์ปดํฌ๋ํธ๋ค๋ก ๋ฌถ์ฌ์๋ค. ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์๋ Class, Function์ ์ด์ฉํด์ ๋ง๋๋ ๋ฐฉ๋ฒ 2๊ฐ์ง๊ฐ ์๋ค. Class Component > ๋ฆฌ์กํธ์์ ์ ๊ณตํ๋ ์ปดํฌ๋ํธ ํด๋์ค๋ฅผ ์์๋ฐ์์ ๋ง๋ ๋ค. > Function Component >
ํด๋น ์ปดํฌ๋ํธ์์ ๊ฐ์ง๊ณ ์๋ date๋ฅผ ์๋ฏธํ๋ค.๋ถ๋ชจ๋ก๋ถํฐ ์ ๋ฌ ๋ properties(์์ฑ)์ ์ฝ์์ธ props์ด๋ค.์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์์์ ๊ฐ๋จํ๊ฒ HTML์ฒ๋ผ ํ ์ ์๋๋ก ๋ง๋ค์ด ์ง ๊ฒ์ด JSX์ด๋ค.className์ด๋ผ๊ณ class๋ฅผ ์ง์ ํด์ผ ๋๋ค.onClick
๋ฆฌ์กํธ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ํด์๋ ์๋์ ๊ฐ์ด 3๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ์งํํ ์ ์๋ค.yarn์ ์ด์ฉํด์ ์ค์น๋ฅผ ์งํํด๋ณผ ๊ฒ์ ๋๋คyarn create react-app ๋ช ๋ น์ด๋ฅผ ์ด์ฉํด์ ์ค์น๋ฅผ ๋๋ธ ๋ค ํด๋น ํด๋๋ก ๋ค์ด๊ฐ๋ณด๋ฉด ๋ง์ ๊ฒ๋ค์ด ์๊ธด๊ฒ์ ํ์ธํ ์ ์๋ค.yarn ๋ช
Vanilla Redux - To Do List >