[react] 체크박스 구현 (ft. 전체 선택, 전체 해제)

[react] 체크박스 구현 (ft. 전체 선택, 전체 해제)

 

react에서 체크박스 

부분 체크, 전체 체크, 전체 해제 구현입니다.

 

구현 영상

부모 컴포넌트

import React, { useState } from 'react';
import MealTimeCard from './MealTimeCard';

const MealChooseCard = () => {
    const [checkedItems, setCheckedItems] = useState([])
    const datas = [
        { title: '아침식사', time: '오전 7:00 ~ 9:00' },
        { title: '아침간식', time: '오전 7:00 ~ 9:00' },
        { title: '점심식사', time: '오전 11:30 ~ 오후 1:00' },
        { title: '점심간식', time: '오전 11:30 ~ 오후 1:00' },
        { title: '저녁식사', time: '오후 5:30 ~ 7:00' },
        { title: '저녁간식', time: '오후 5:30 ~ 7:00' },
    ]

    const checkedItemHandler = (code, isChecked) => {
        if (isChecked) { //체크 추가할때
            setCheckedItems([...checkedItems, code])
        } else if (!isChecked && checkedItems.find(one => one === code)) {//체크 해제할때 checkedItems에 있을 경우
            const filter = checkedItems.filter(one => one !== code)
            setCheckedItems([...filter])
        }
    }

    const onCheckAll = (checked) => { //전체 선택
        if (checked) {
            const checkedItemsArray = []
            datas.forEach(data => checkedItemsArray.push(data.title))
            setCheckedItems(checkedItemsArray)
        } else { //전체 해제
            setCheckedItems([])
        }
    }

    return (
        <>
            <label onClick={onCheckAll}>
                <input type='checkbox'
                    name='meal'
                    onChange={(e) => onCheckAll(e.target.checked)}
                    className='hidden' />
                <img src={checkedItems.length === datas.length ? `/images/mobile/meal/checkbox_active.svg` : `/images/mobile/meal/checkbox.svg`} />
                <h2>모두 선택</h2>
            </label>
            <div>
                {datas.map(data => <MealTimeCard data={data.title} checkedItems={checkedItems} checkedItemHandler={checkedItemHandler} />)}
            </div>

        </>
    );
};

export default MealChooseCard;

 

자식 컴포넌트

import React, { useState, useEffect } from 'react';

const MealTimeCard = ({ data, checkedItems, checkedItemHandler }) => {
    const [isChecked, setIsChecked] = useState(null)

    const onCheck = ({ target }) => {
        checkedItemHandler(target.value, target.checked)
        setIsChecked(target.checked)
    }

    useEffect(() => {
        if (checkedItems.includes(data)) {
            setIsChecked(true)
        } else {
            setIsChecked(false)
        }
    }, [checkedItems])

    return (
        <>
            <label key={data}>
                <input type='checkbox'
                    name='meal'
                    checked={isChecked}
                    value={data}
                    onChange={e => onCheck(e)}
                    className='hidden' />
                <span>{data}</span>
            </label>
        </>
    );
};

export default MealTimeCard;