[React] RadioButton 커스텀하기 with styled-components

 

기존 Input에서 제공하는 RadioButton에서 색만 바꾸고 싶었을 뿐인데, 생각보다 자료들이 많지 않았다. 커스텀했다는 내용을 살펴보면 radio 특유의 동그라미 2개를 사용하는 모양보다, 아예 새로운 이미지를 사용하는 경우가 대다수였다. 그래서 나처럼 고민하는 사람들을 위해 RadioButton 커스텀하는 방법을 정리해보도록 하겠다!

 

먼저, 내가 만들고자 하는 모양은 다음과 같았다.

 

고려해야 할 점은 선택되었을 때

1. 내부에 동그라미가 생겨야 하며
2. icon의 색과 label의 색상이 바뀌어야 한다

 

는 것이다.

 

다른 것보다 나는 css에 대해 잘 모르고 있어서, 1번을 어떻게 구현해야 하는지 막막했다.

 

여기서는 다음과 같은 css에 대해 아는 것이 중요하다.

가상 선택자 :after
선택한 요소의 내용 뒤에 콘텐츠를 생성하거나 스타일을 적용하는 데 사용되는 가상 선택자

조합자 +
인접 형제 요소를 선택하는 데 사용되며, 해당 요소에 스타일을 적용할 수 있다

가상 선택자 :checked
input 요소 중에서 체크된 상태인 요소를 선택하는 데 사용되는 가상 선택자

 

위의 CSS 선택자들을 사용해서 코드를 작성했다.

 

 

코드

---

RadioButton.js

먼저, 컴포넌트의 구조를 나타내는 코드는 다음과 같다.

import React from 'react';
import { RadioIcon, RadioInput, RadioWrapper } from './style';

const RadioButton = ({ name, value, checked, onChange, children }) => {
  return (
    <RadioWrapper checked={checked}>
      <RadioInput
        type="radio"
        name={name}
        value={value}
        checked={checked}
        onChange={onChange}
      />
      <RadioIcon checked={checked}/>
      {children}
    </RadioWrapper>
  );
};

export default RadioButton;

 

style.js

CSS는 따로 파일을 만들어서 관리하도록 하였다.

import styled from 'styled-components';

export const RadioWrapper = styled.label`
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  font-weight: 700;
  color: ${(props) => (props.checked ? '#1C1C1CD9' : '#1C1C1C99')};
`;

export const RadioInput = styled.input`
  position: absolute;
  opacity: 0;
  cursor: pointer;

  &:checked + span:after {
    display: block;
  }
`;

export const RadioIcon = styled.span`
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 1.5px solid ${props => props.checked ? '#3D4371' : '#3D437199'};
  background-color: #fff;

  &:after {
    content: '';
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3D4371;
  }
`;

 

 

사용 방법

---

위의 RadioButton을 통해 면접을 생성하는 부분에서 직무를 선택할 수 있도록 만들었다.

GenerateInterview.js

const GenerateInterview = () => {
  const [selectedJobType, setSelectedJobType] = useState("");

  const handleJobTypeChange = (event) => {
    setSelectedJobType(event.target.value);
  };
  
  return (
    <>
      <RadioButton
        name="jobType"
        value="프론트엔드"
        checked={selectedJobType === "프론트엔드"}
        onChange={handleJobTypeChange}
      >
        프론트엔드
      </RadioButton>
      <RadioButton
        name="jobType"
        value="서버/백엔드"
        checked={selectedJobType === "서버/백엔드"}
        onChange={handleJobTypeChange}
      >
        서버/백엔드
      </RadioButton>
      <RadioButton
        name="jobType"
        value="웹 풀스택"
        checked={selectedJobType === "웹 풀스택"}
        onChange={handleJobTypeChange}
      >
        웹 풀스택
      </RadioButton>
      <RadioButton
        name="jobType"
        value="iOS"
        checked={selectedJobType === "iOS"}
        onChange={handleJobTypeChange}
      >
        iOS
      </RadioButton>
    </>
  );
};

export default GenerateInterview;

 

실행 결과

---