Foresitory 🌳 Foresitory 🌳

체크박스

• [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 속성을 전달해 줍니다. 그리고 모든 속..

  Read More
• [React] Checkbox (1) — Context API로 Checkbox 상태 관리하기

  TECH 2022. 2. 19. 20:00

  프로젝트를 하면서 카테고리를 체크박스로 선택하고 버튼으로 해제하는 기능을 구현해야 했는데 버튼으로 체크박스를 해제하는 방식에서 고민을 많이 해, 포스팅으로 남겨 두려고 합니다. 임의의 배열 데이터로 체크박스를 만들고 Context API로 상태 관리하기 아래와 같은 데이터로 체크박스를 만들었습니다~ 더보기 // utils/sampleData.js export const data = [ "가을", "가람", "기쁨", "구름", "나리", "너울", "누리", "노을", "눈꽃", "다솜", "마음", "마루", "미르", "무늬", "맑음", "믿음", "뭇별", "바다", "방울", "보름", "봄꽃", "별빛", "별밤", "별숲", "사랑", "솔잎", "새벽", "새싹", "샛별", "아침", "..

  Read More