[ReactJS] Styled Components

강서현·2022년 9월 11일

Styled components: CSS-in-JS 라이브러리.
bla-bla.js+bla-bla.css -> bla-bla.js !

설치

$ npm i styled-components

기본 형태

const Container = styled.div`
  padding: 0px 20px;
  max-width: 480px;
  margin: 0 auto;
`;

...
return{
	<Container></Container>
}

Styled Component의 가장 기본 형태.
div 태그에 Styled Component을 적용한 Container 태그이다.
백틱 내에 일반적인 css 코드가 들어있다.
그런데 이렇게 작성하게 되면, 작은 변화가 있을 때에도 계속 새로 컴포넌트를 작성해야한다. 그래서 컴포넌트를 재사용하는 몇 가지 방법들이 있다.

1. Props: 일부 속성값 변경

const Container = styled.div`
  padding: 0px 20px;
  max-width: 480px;
  margin: 0 auto;
  background-color: ${(props) => props.bgColor};
`;

...
return{
	<Container bgColor="blue" />
}

props를 사용해 배경색을 더했다. class 명은 임의로 알아서 정해진다.

2. styled(Container): 속성을 추가할 때

위의 경우와 다르게 속성 자체를 추가하고 싶을 수 있다. 예를 들어 radius 값을 추가해 Container를 둥글게 만들고 싶을 때가 그러하다. 그럴 때는 아래와 같은 방법을 사용할 수 있다.

const Circle = styled(Container)`
  border-radius: 50px;
`;

...
return{
	<Circle bgColor="blue" />
}

Cricle은 Container의 모든 속성을 받고 있기 때문에 props 역시 동일하다.

3. as : 태그의 종류를 바꿀 때

const Container = styled.div`
  padding: 0px 20px;
  max-width: 480px;
  margin: 0 auto;
`;

...
return{
	<Container as="button" />
}

스타일은 똑같지만, 다른 태그로 동일한 스타일을 사용하고 싶을 때는 as props를 사용하면 된다.

4. styled.input.attrs(): 제한사항 설정

Form을 만들거나 할 때는 <Input> 태그 여러 개를 사용하게 되는데, 이때 Required과 같은 제한 사항들을 전부 적어주는 것이 상당히 귀찮다.
이 경우 const Input = styled.input.attrs({required:true})와 같이 미리 제한사항을 명시할 수 있다.

Plus1. Animation

우선 keyframes를 import 해주자.
import styled, {keyframes} from "styled-components";

그리고 Animation을 작성하면 된다.

  const animation = keyframes`
  	from{
  	  transform:rotate(0deg);
  	}
  	to{
  	  transform:rotate(360deg);
  	}
  
 const Container = styled.div`
  padding: 0px 20px;
  max-width: 480px;
  margin: 0 auto;
  animation: ${animation} 1s linear infinite;
  //여기서 animation을 불러온다.
`;

...
return{
	<Container></Container>
}

Plus2. Pseudo Selectors

스타일 컴포넌트를 매번 지정하는 건 좀 귀찮다. 그래서 가상 선택자를 사용할 수 있다. 아주 간단한데, 상위 태그의 스타일 컴포넌트 안에 하위태그를 적어주면 된다.

const Container = styled.div`
  padding: 0px 20px;
  max-width: 480px;
  margin: 0 auto;
  
  //이렇게!
  span{ 
  	font-size: 30px;
  	&:hover{
  		font-size:100px;
  	}
  }
`;

...
return{
	<Container>
      <span> i'm text </span>
  	</Container>
}