리액트에서 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 ts

리액트에서 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기

Handle multiple checkbox components in React

---

 

 

이번 글을 통해 배워갈 내용 ( What you will learn)

1. 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 ( Handle multiple checkbox components in React)

---

출력될 화면은 아래와 같습니다.

(below screenshot will be shown if you git clone my project below)

 

아래의 시점이 해당 스터디에 시작지점입니다.

below git shows checkbox before the start of study

https://github.com/songk1992/react-examples/commit/c4ac9c561222a3d6e4d5df2ece67c1f0963214bb

checkbox-before · songk1992/react-examples@c4ac9c5

import { NextPage } from "next"
import { useState } from "react"

const myFoodList = [
    '김치',
    '고구마',
    '감자',
    '피자',
    '햄버거',
    '라면',
    '제육볶음',
    '삼계탕',
    '닭곰탕',
    '추어탕'
]

const MyCheckList: NextPage = () => {

    const [foods, setFoods] = useState<string[]>([])

    const onMyFoodChecked = (selected : string[]) => {
        setFoods(selected)
        console.log(selected)
    }

    return(
    <ol>{myFoodList.map((food, idx)=>
        <li key={food + '-' + idx}>
            <input type='checkbox' checked={foods?.includes(food)}onChange={(e)=>{
                if(e.target.checked){
                    onMyFoodChecked([...foods!, food])
                } else{
                    onMyFoodChecked(foods.filter((_food)=> _food !== food));
                }
            }}/>
            <span>{food}</span>
        </li>
    )}
    </ol>
    )
}

export default MyCheckList;

 

위의 코드를 보시면 간단합니다

myFoodList에 체크박스에 넣을 스트링들을 넣어주고

foods에 체크된 값들을 넣어주었습니다.

 

above shows simple code

where 'myFoodList' shows strings to be rendered

and 'foods' shows checked strings

 

useState로 foods 를 관리 해주었고

myFoodList를 map 으로 돌면서 리스트를 화면에 render 하였습니다.

체크박스 클릭시 현재 foods에 체크된 값을 업데이트 해줍니다.

 

I have used useState for 'foods' (I usually use store and redux in my real projects)

myFoodList has been rendered one by one using map()

and when you click the checkbox, 'foods' will be updated

 

자 그럼 after를 보겠습니다.

변수명이 이쁘지 않아서 변수명도 수정했고

컴포넌트화 하였습니다.

 

Below shows the code after making it into a component.

I have changed variable names to make it cleaner

 

https://github.com/songk1992/react-examples/commit/e16bf3ad1b7c30ab06869c68673facd703a943a6

checkbox-after · songk1992/react-examples@e16bf3a

 

// components/learn22/CheckboxList.tsx

import { FunctionComponent } from "react";

interface Props {
    checkedFoods ?: string[];
    onCheck: (checked : string[]) => void;
    foods ?: string[];
}
 
const CheckBoxList : FunctionComponent<Props> = ({
    checkedFoods =[],
    onCheck,
    foods =[]
}) => {

    return (<ol>{foods.map((food, idx)=>
        <li key={food + '-' + idx}>
            <input type='checkbox' checked={checkedFoods?.includes(food)}onChange={(e)=>{
                if(e.target.checked){
                    onCheck([...checkedFoods!, food])
                } else{
                    onCheck(checkedFoods.filter((_food)=> _food !== food));
                }
            }}/>
            <span>{food}</span>
        </li>
    )}
    </ol>  );
}
 
export default CheckBoxList;

// pages/learn22/lec01/index.tsx

import { NextPage } from "next"
import { useState } from "react"
import CheckboxList from "../../../components/learn22/CheckboxList"

const myFoodList = [
    '김치',
    '고구마',
    '감자',
    '피자',
    '햄버거',
    '라면',
    '제육볶음',
    '삼계탕',
    '닭곰탕',
    '추어탕'
]

const MyCheckList: NextPage = () => {

    const [checkedFoods, setCheckedFoods] = useState<string[]>([])

    const onMyFoodChecked = (checked : string[]) => {
        setCheckedFoods(checked)
        console.log(checked)
    }

    return(
        <CheckboxList
            checkedFoods ={checkedFoods}
            onCheck = {onMyFoodChecked}
            foods = {myFoodList}
        />
    )
}

export default MyCheckList;

 

 checkedFoods, onCheck, foods 을 props 로

component에 넘겨주고 before과 동일하게 작동하게 만들었습니다.

 

checkedFoods, onCheck, foods have been handed to React component as props

and code after cleaning works nicely :)

 

 

영어로 처음 티스토리 글을 써봤는데

더욱더 많은 사람들에게 도움이 되었으면 좋겠습니다.

 

I have written my first Tistory blog post in English

and I hope it helps many people to make a better world :)

 

 

 

 

참조 및 인용 (reference)

---

https://stackoverflow.com/questions/71586722/handle-multiple-checkbox-components-in-react

Handle multiple checkbox components in React

---