[React] Checkbox 커스텀하기 with styled-components (+애니메이션)

프로젝트를 진행하다 보니 체크박스를 내가 원하는 디자인으로 커스텀을 해야 했다.

 

체크 전 후 이미지

 

기본으로 제공되는 체크박스는 내가 원하는 스타일과는 꽤나 다르게 생겼다.

 

기본 제공 체크박스

그래서 다음과 같이 Checkbox 컴포넌트를 새로 만들기로 했다.

 

 

코드

---

Checkbox.js

import { CheckboxStyle, CheckboxWrapper, StyledLabel } from "./style";

const Checkbox = ({ id, label, checked, handler }) => {
  return (
    <CheckboxWrapper>
      <CheckboxStyle
        type="checkbox"
        id={id}
        name={id}
        checked={checked}
        onChange={handler}
      ></CheckboxStyle>
      <StyledLabel htmlFor={id}>{label}</StyledLabel>
    </CheckboxWrapper>
  );
};

export default Checkbox;

먼저, <CheckboxWrapper />가 커스텀한 Checkbox인 <CheckboxStyle />과 <StyledLabel />을 감싸도록 했다. Checkbox를 사용하기 위해 input type을 "checkbox"로 지정해 주고, 식별하기 위한 id값을 지정해 준다. name은 전달할 값의 이름이고, checked를 통해 선택되었는지 그 상태를 관리한다. 체크 여부를 관리해 주기 위해 onChange도 사용한다.

<StyledLabel /> 을 클릭해도 체크박스가 선택되도록 하기 위해 연결하는 작업이 필요하다. 체크박스에 부여한 id값을 label의 htmlFor로 지정하면 된다.

 

❗️ html에서는 for로 해도 동작이 되지만, react에서는 for문이 따로 있기 때문에 htmlFor로 지정해줘야 한다는 점을 유의해야 한다.

 

 

style.js

Checkbox 폴더 안에서 style은 따로 분리해서 관리하도록 했다.

import styled from 'styled-components';
import IcGrayCheck from '../../images/ic_gray_check.svg';

export const CheckboxWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

export const CheckboxStyle = styled.input`
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #CECECE;
  border-radius: 3px;

  &:checked {
    border-color: transparent;
    background-image: url(${IcGrayCheck});
    background-size: 10px 7px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #CECECE;
  }
`;

export const StyledLabel = styled.div`
  color: #A0A0A0;
  font-size: 14px;
`;

 

index.js

마지막으로 index.js는 컴포넌트를 깔끔하게 정리하기 위해 작성했다. 이름을 바꾸는 등의 상황에서 편리하게 작동하도록!

import Checkbox from "./Checkbox";
export default Checkbox;

 

사용 방법

---

나는 위의 체크박스 컴포넌트를 signup 파트에서 이용약관을 표시하는 용도로 사용했다.

 

Signup.js

import Checkbox from "../components/Checkbox/Checkbox";

const Signup = () => {

  const [tos1Checked, setTos1Checked] = useState(false);
  const [tos2Checked, setTos2Checked] = useState(false);
  const [tos3Checked, setTos3Checked] = useState(false);

  function handleTos1Change(event) {
    setTos1Checked(event.target.checked);
  }

  function handleTos2Change(event) {
    setTos2Checked(event.target.checked);
  }

  function handleTos3Change(event) {
    setTos3Checked(event.target.checked);
  }

    return (
        <div>
          <Checkbox
            id="tos1"
            label={"만 14세 이상입니다."}
            checked={tos1Checked}
            handler={handleTos1Change}
          />
          <Checkbox
            id="tos2"
            label={"이용약관을 모두 확인하였으며 이에 동의합니다."}
            checked={tos2Checked}
            handler={handleTos2Change}
          />
          <Checkbox
            id="tos3"
            label={"개인정보 처리방침을 모두 확인하였으며 이에 동의합니다."}
            checked={tos3Checked}
            handler={handleTos3Change}
          />
        </div>
    );
};

export default Signup;

 

애니메이션 추가

---

style.js

import styled from 'styled-components';
import IcGrayCheck from '../../images/ic_gray_check.svg';

export const CheckboxWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
`;

export const CheckboxStyle = styled.input`
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #CECECE;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(${IcGrayCheck});
  background-size: 0px 0px;
  background-repeat: no-repeat;
  background-position: 50%;

  &:checked {
    transition: all 0.2s;
    border-color: transparent;
    background-size: 10px 7px;
    background-color: #CECECE;
  }
`;

export const StyledLabel = styled.div`
  color: #A0A0A0;
  font-size: 14px;
`;

체크박스에 애니메이션을 추가하기 위해 stye.js를 조금 수정하였다. 기본적으로 바탕과 check 이미지가 모두 transition 속성을 갖게 되었고, 그 과정에서 깨지거나 어색한 동작이 없도록 background관련 일부 속성을 이동시켰다.