styled-components 알차게 사용하기

이번에 정리할 내용은 styled-components가 가진 기능들을 보다 알차게 사용하는 법에 대한 것이다.

styled-components는 각각의 컴포넌트들을 생성하고 그 컴포넌트들의 css를 바로 작성할 수 있게 해주는 라이브러리이다.

 

기존의 css나 태그의 style 속성을 사용할 때는 변수를 사용할 수 없었지만, styled-components를 사용하면 컴포넌트이기 때문에 props로 값을 받아 변수처럼 사용할 수 있다.

import styled from 'styled-components';

const ImageBox = () => {
	return(
		<Image url={'image path'}/>
	);
};

const Image = styled.div`
	width: 10px;
	height: 10px;
	background: url(${props=>props.url}) center center / cover;
`

이 코드에서는 Image 컴포넌트에 props로 url을 넘겨주고, 그 url을 css에서 background에 설정하여 이미지가 표시되도록 할 수 있다.

 

또한 한 styled-components 내에서 다른 컴포넌트를 지정하여 css를 변경하는 것도 가능하다!

import styled from 'styled-components';

const ImageBox = () => {
return(
      <>
      <Image url={'image path'}>
          <DelIcon src={'delIcon path'}/>
      </Image>
      <Other/>
      </>
	);
};


const DelIcon = styled.img`
	display: none;
    width: 8px;
	height: 8px;
	border-radius: 4px;
`;

const Other = styled.div`
	display: none;
	width: 20px;
	height: 20px;
`;

const Image = styled.div`
	width: 30px;
	height: 30px;
	background: url(${props=>props.url}) center center / cover;

	&:hover {
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
		${DelIcon} {
			display: block;
		}
		~ ${Other} {
			display: block;
		}
	}
`;

이 코드의 경우 Image 컴포넌트를 hover하면 컴포넌트의 그림자가 설정된다. 

또한 DelIcon 컴포넌트의 display 속성이 none→block으로 바뀐다.

마찬가지로 Other 컴포넌트의 display 속성이 none→block으로 바뀐다.

DelIcon 컴포넌트의 경우 Image 컴포넌트의 자식 컴포넌트이기 때문에 ${DelIcon}으로 지정이 가능했다.

하지만 Other 컴포넌트의 경우 Image 컴포넌트의 자식 컴포넌트가 아니기 때문에 '~'을 추가하여 ~${Other}로 지정해주어야 한다.

그리고 한가지 주의할 점은 지정해주는 컴포넌트들이 이전에 미리 정의된 컴포넌트여야 한다는 것이다.

이 코드에서는 Image 컴포넌트들보다 DelIcon, Other 컴포넌트들이 먼저 작성되었다.

 

 

input 을 만들때도 styled-components를 사용하면 다양한 효과를 설정할 수 있어서 편리하다.

import styled from 'styled-components';

const InputRender = () => {
	return <InputBox type='text' placeholder='This is placeholder'/>
};

const InputBox = styled.input`
	width: 100px;
	height: 25px;
	border: 1px solid gray;
	border-radius: 5px;

	outline: none;

	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	color: #363636;

	&::placeholder{
		color: #black;
	}

	&:hover{
		border: 1px solid black;
	}

	&:focus{
		color: #363636;
		border: 1px solid red};
	}
`;

이 코드에서는 input 태그의 기본 css 설정을 초기화하기 위해 outline 속성을 none으로 설정해주었다.

그리고 placeholder의 글씨색상과 입력된 텍스트의 색상을 다르게 설정하기 위해 &::placeholder와 &:focus를 사용하였다.

&:focus를 이용하면 input창이 클릭되었을 때 css를 설정을 할 수 있다.