styled-components로 checkbox 커스텀하기

웹 사이트 제작을 하면서 체크박스를 커스텀해야할 상황이 생겼는데, 다들 css를 사용하여 커스텀하는 방법을 사용하고 있었다.

나의 경우에는 styled-components를 사용하여 커스텀을 하고 싶었기 때문에 관련 자료들을 찾아보다가 

medium.com/@colebemis/building-a-checkbox-component-with-react-and-styled-components-8d3aa1d826dd

Building a Checkbox Component with React and styled-components

이 분이 작성한 글을 발견하게 되었다!

 

체크박스 커스텀을 위해서는 4가지 컴포넌트가 필요하다.

1. 체크박스 컨테이너

2. 체크박스 

3. 실제 체크박스

4. 체크 기호

 

🗄 체크박스 컨테이너

const CheckBoxContainer = styled.div`
	display: inline-block;
	vertical-align: middle;
`;

체크박스를 감싸는 컴포넌트이다.

 

 📦 체크박스

const StyledCheckBox = styled.div`
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border: ${props => props.checked ? 'none' : 'solid 0.1rem #dddddd'};
	background: ${props => props.checked ? 'black' : 'white'};
	border-radius: 0.4rem;
	transition: all 150ms;

	${Icon} {
		visibility: ${props=>props.checked? 'visible': 'hidden'};
	}
`;

우리가 css를 이용해 체크박스를 커스텀할 때 필요한 컴포넌트이다.

props로 checked 여부를 받아서 border, background color를 설정해준다.

만약 사용자가 체크박스를 클릭한다면 checked = true가 되고 background color는 black이 될 것이다!

그리고 만약 체크가 된 상태라면  Icon 컴포넌트의 visibility를  visible로 바꿔준다. 

이를 통해 체크 표시를 나타나게 할 수 있다.

주의할 점은 Icon 컴포넌트에 대한 코드가 StyledCheckBox 컴포넌트보다 상단에 존재해야 한다.

 

 🗳 실제 체크박스

const HiddenCheckBox = styled.input`
	border: 0;
	clip: rect(0 0 0 0);
	clippath: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
`;

체크 기능을 위해 필요한 컴포넌트이다.

이를 위해 checked 타입의 input 컴포넌트이다.

커스텀한 체크박스가 보여야 하므로 이 체크박스는 화면에서 보이지 않도록 해주어야 한다.

하지만 체크 기능에 필요하기 때문에 display: none을 사용할 수는 없다.

따라서 다음과 같이 css를 작성해주었다.

webclub.tistory.com/33

clip속성을 이용한 접근성 obj_hidden 처리하기

이 블로그에 더 자세한 설명이 되어있다.

 

✔ 체크 표시

const Icon = styled.svg`
	fill: none;
	stroke: white;
	stroke-width: 2px;
`;

polyline태그로 생성한 체크 표시를 svg로 만들어주는 컴포넌트이다.

 

최종적으로...

export default ({className, checked, ...props}) => (
	<CheckBoxContainer className={className}>
		<HiddenCheckBox type={'checkbox'} checked={checked} {...props}/>
		<StyledCheckBox checked={checked}>
			<Icon viewBox="0 0 24 24">
				<polyline points="19 7 10 17 5 12"/>
			</Icon>
		</StyledCheckBox>
	</CheckBoxContainer>
)

다음과 같이 4개의 styled-components를 합쳐서 원하는데로 커스텀한 체크박스를 만들 수 있다!