[REACT] checkbox 토글 기능 만들기 - javascript 사용하여 useState 리랜더링

 

 

 

회사에서 과제로 To-do 리스트 만드는걸 내줬다.

 

 

 

 

 

 

체크박스의 토글에 따라 일정 완료기능을 넣었는데

매번 체크박스를 업데이트 할 때, 스크립트 구조를 어떻게 잡아야할지

어떻게 useState로 업데이트하여 리랜더링 해야하는지

매번 만들때마다 구조가 늘 꼬여 이번에 정리하며 메모하려 한다.

 

 

 

 

db.json

[
  {
    "id": 0,
    "type": "To-Do",
    "title": "맛있는거 만들어먹기",
    "process": true
  },
  {
    "id": 1,
    "type": "약속",
    "title": "친구랑 맛집가기",
    "process": false
  },
  {
    "id": 2,
    "type": "취미",
    "title": "상체 조지기",
    "process": false
  }
]

 

 

 

우선 나의 db 구조는 이렇게 만들었다.

process에 true/false에 따라 checkbox 기능 작동.

 

 

 

 

< React >

// 상위 컴포넌트

// 상위 컴포넌트
const Step4 = (props) => {
  const [dummyDB, setDummyDB] = useState(dummy)
  
    const handleCheckboxChange = (selectedId) => {
    하위에서 받으온 선택된 id값 전달
     setDummyDB( prev => (
       prev.map( item => 
        // 기존 prev 데이터를 map으로 돌려서
        item.id === selectedId ?
        // prev와 selected의 같은 데이터면
          { ...item, process: !item.process }
          // 돌린 item값을 복사하고, 거기서 process 값은 반대로 적용
          : item
          // id값이 다른것들은 그대로 적용
       )
    ));
  }
  
  
  return(
      <TodoList key={list.id}
        data={list}
        handleCheckboxChange={handleCheckboxChange}
	  />
  )
}

 

 

 

 

db.json을 dummyDB에 넣은 후, 컴포넌트 구조 만들고 리스트를 뿌려준다.

그리고 체크박스 클릭할때 작동하는 함수 기능인

handleCheckChange를 만들어 컴포넌트에 props로 넘겨준다.

 

 

 

 

 

< React >

// 하위 컴포넌트

// 하위 컴포넌트
const TodoList = ({data, handleCheckboxChange} ) => {
  const onChangeCheckbox = () => {
  // onChange가 일어나면
    handleCheckboxChange(data.id)
    //상위에서 받은 함수에 이 리스트 id값을 전달하기
  }
	return (
    <li className="todoLists">
      <input 
        className="checkbox"
        type="checkbox"
        checked={data.process}
        onChange={onChangeCheckbox}
      />
    </li>
    )
}

 

 

 

checkbox가 토글 될 때마다 변화할 onChange에 함수 onChangeCheckbox를 만들어서

현재 선택된 데이터의 id값을 props로 받은 handleCheckboxChange의 파라미터로 넘겨버린다.

 

 

 

 

 

 

그럼 상위에 적용된 handleCheckboxChange 함수에 적용한

파라미터 selected 값에 id값이 전달되도록 성공!

 

그럼 dummyDB의 값을 map으로 돌려

각각의 객체 id값과 selected에 담겨진 id값이 같으면

process의 값을 반대로 변경하고 그 외에는 그대로 유지...

 

된!! 그 dummyDB값을 setDummyDB (useState) 통해 업데이트 적용!

 

 

 

 

< 완성 본 >

 

- checked 되면 false값이 되어 완료되었음을 표시.

- checked가 해제되면 다시 진행중으로 표시.

 

 

그럼 이렇게 onChange되면서 true/false 작동 완료된다.

 

 

 

 

 

 

 

 

 

도움이 되셨다면 아슈쿠림🍧 사먹고싶어

광고 한번씩 눌러주시면 감사하겠습니다 ♥