리액트에서 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기
Handle multiple checkbox components in React
이번 글을 통해 배워갈 내용 ( What you will learn)
- 여러 체크박스들을 하나의 컴포넌트로 재활용 해보기 ( 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
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
// 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
'Javascript > React' 카테고리의 다른 글
React로 이미지 업로드 및 필터 적용하고 출력해보기 (0) | 2022.11.19 |
---|---|
TypeScript와 함께 useReducer를 사용하는 방법 (0) | 2022.07.16 |
김씨가 리액트에서 함수 활용하는 비법 한가지 (0) | 2022.05.31 |
React Hook State 묶어서 쓰는 한가지 방법 (0) | 2022.03.26 |
리액트 SVG로 손글씨 그림그리기 효과 구현해보는 한가지 방법 (0) | 2022.03.12 |