[쇼핑몰 사이트 만들기] #2-3. 체크 박스 만들기

체크 박스는 나라별로 필터링해서 유저가 원하는 정보만 노출 시킬 수 있는 기능이다. 대부분의 쇼핑몰 서비스에서 상품을 필터링 하기 위해 요 기능을 사용하는 것 같다.
해당 기능을 구현하기 위해서 아래와 같은 순서로 진행된다!

목차

1. CheckBox 리스트 데이터들을 만들기
2. checkbox를 위한 UI 만들기
3. onChange Function 만들기
4. Checked State를 부모 컴포넌트로 업데이트 하기

✅ 1. CheckBox 리스트 데이터들을 만들기

src/components/views/LandingPage/Sections/Datas.js 생성 및 수정

const continents = [
  {
    _id: 1,
    name: "Africa",
  },
  {
    _id: 2,
    name: "Europe",
  },
  {
    _id: 3,
    name: "Asia",
  },
  {
    _id: 4,
    name: "North America",
  },
  {
    _id: 5,
    name: "South America",
  },
  {
    _id: 6,
    name: "Australia",
  },
  {
    _id: 7,
    name: "Antarctica",
  },
];
export { continents };

checkBox에 사용해 줄 나라 데이터들을 정의해준다!

🎨 2. checkbox를 위한 UI 만들기

src/components/views/LandingPage/LandingPage/Sections/Chckbox.js 생성 및 수정

import React from "react";
import { Collapse, Checkbox } from "antd";

const { Panel } = Collapse;

const CheckBox = (props) => {
  const renderCheckboxLists = () =>
    props.list &&
    props.list.map((value, index) => (
      <React.Fragment key={index}>
        <Checkbox onChange>
          <span>{value.name}</span>
        </Checkbox>
      </React.Fragment>
    ));

  return (
    <div>
      <Collapse defaultActiveKey={["1"]}>
        <Panel header="This is panel header 1" key="1">
          {renderCheckboxLists()}
        </Panel>
      </Collapse>
    </div>
  );
};

export default CheckBox;

checkbox에 대한 부분을 랜더링 하기 위한 컴포넌트이다. 해당 부분의 디자인은 ant Design을 참고하여 만들었고 panel과 Checkbox를 참고하여 만들었다.
props의 list value들을 map을 통해서 checkbox로 각각 생성해준다. 해당 checkbox 요소들은 panel안에 넣어서 접었다 폈다 가능하도록 해준다!

src/components/views/LandingPage/LandingPage.js 수정

import CheckBox from "./Sections/CheckBox";
import { continents } from "./Sections/Datas";

function LandingPage() 	{
//...
  return (
   // ...
    <CheckBox list={continents} />
	)
}
export default LandingPage;

만들어 둔 checkBox 컴포넌트는 LandingPage로 와서 사용해주고 props로는 list라는 이름으로 datas에 만들어 둔 continents를 넘겨준다.

🆕 3. onChange Function 만들기

src/components/views/LandingPage/LandingPage/Sections/Chckbox.js 수정

const CheckBox = (props) => {
  const [Checked, setChecked] = useState([]);

  const handleToggle = (value) => {
    // 누른 index를 구하고
    const currentIndex = Checked.indexOf(value);
    //index가 있으면 해당 값의 index, 없으면 -1
    // 전체 Checked된 State에서 현재 누른 Checkbox가 이미 있다면 빼주고
    const newChecked = [...Checked];

    if (currentIndex === -1) {
      // 안되었다면 state에 넣어주고
      newChecked.push(value);
      // check되었다면 state를 빼주고
    } else {
      newChecked.splice(currentIndex, 1);
    }
    setChecked(newChecked);
  };

  const renderCheckboxLists = () =>
    props.list &&
    props.list.map((value, index) => (
      <React.Fragment key={index}>
        <Checkbox onChange={() => handleToggle(value._id)} checked={Checked.indexOf(value._id) === -1 ? false : true} />
        <span>{value.name}</span>
      </React.Fragment>
    ));
};

이제 checkbox를 체크했을 때 어떤 일이 일어나야하는지를 함수에 구현해준다.
우선 현재 눌러져있는 항목들을 모두 저장해 줄 Checked라는 state를 생성해준다.
onchange function 에서는 눌리지 않은 항목을 눌렀을 때와 이미 눌린 항목을 눌렀을 때의 상황을 나누어 분기 처리 해주는 과정이 필요하다.
우선 눌린 checkbox의 id를 indexOf를 통해 Checked state 안에 있는 id인지 없는 id인지 판별해주는 과정이 필요하다. 만약 없다면 setChecked를 통해 Checked state안에 넣어주고 있다면 splice를 통해 현재 눌린 index를 제거해주는 과정이 필요하다.

🆙 4. Checked State를 부모 컴포넌트로 업데이트 하기

src/components/views/LandingPage/LandingPage.js 수정

const handleFilters = () => {};

<CheckBox list={continents} handleFilters={(filter) => handleFilters(filters, "continents")} />;

다음 시간에 필터 기능을 구현하기 위해서 handleFilters 라는 함수를 우선 선언해준다.

src/components/views/LandingPage/LandingPage/Sections/Chckbox.js 수정

const handleToogle = (props) => {
  //...
  props.handleFilters(newChecked);
};

그리고 props로 handleFilters를 내려받아 다시 부모로 newChecked에 대한 것들을 올려준다.

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 를 공부하며 작성한 글입니다.