๋ฒํผ์ผ๋ก์ฒดํฌ๋ฐ์คํด์
-
[React] Checkbox (2) — ๋ฒํผ์ผ๋ก ์ ํ ํด์ ํ๊ธฐTECH 2022. 2. 21. 01:59
[React] Checkbox (1) — Context API๋ก ์ํ ๊ด๋ฆฌํ๊ธฐ์ ์ด์ด์ง๋ ํฌ์คํ ์ ๋๋ค. ๋ฒํผ์ผ๋ก ์ฒดํฌ๋ฐ์ค ํด์ ํ๊ธฐ ์ฒดํฌ๋ฐ์ค์ ์ํ ๊ด๋ฆฌ๋ฅผ ํ ์ ์๋ค๋ฉด ๋ฒํผ์ผ๋ก ์ฒดํฌ๋ฐ์ค ํด์ ํ๋ ๋ฐฉ๋ฒ์ฏค์ ๊ป์ ๋๋ค. ์ฐ์ ์ฒดํฌ๋ ์์๋ค์ ๋ฒํผ์ผ๋ก ์ถ๋ ฅํด ๋ณด๊ฒ ์ต๋๋ค. ๋ฒํผ ์์ ํ๋๋ Selected.jsx๋ก ๋ง๋ค๊ณ , ์ถ๋ ฅ์ CheckboxList์์ ๊ฐ์ด ํด ๋ณด๊ฒ ์ต๋๋ค. 1. ์ฒดํฌ๋ ์์ ๋ฒํผ์ผ๋ก ์ถ๋ ฅํ๊ธฐ {Object.keys(cateObject).map((key, index) => { return ( ); })} CheckboxList.jsx์ return ๋ฌธ์ ์ด๋ฐ ์ฝ๋๋ฅผ ์ถ๊ฐํด ์ค๋๋ค. value์๋ ํ ์คํธ๋ฅผ ์ ๋ฌํด ์ฃผ๊ณ , checked์๋ true/false ์์ฑ์ ์ ๋ฌํด ์ค๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ์..