[React] Styled Components 사용 방법

 

 

Styled Components 설치하기

Styled Components는 NPM(Node Package Manager)를 통해 관리되는 패키지이기 때문에, 간단한 명령어를 통해 설치할 수 있다.

 

$ npm i styled-components

https://ddiddibbung.tistory.com/93

'edgesout' 경고와 함께 NPM 설치 실패 #3998 : Cannot read properties of null reading edgesOut styled components

 

 

기본 문법

Styled Components를 사용하기 위해서는 가장 먼저, 아까 설치한 styled-components 패키지에서 styled를 import 해야 한다.

import styled from "styled-components";

 

 

기본적으로 html의 모든 태그들에 스타일을 적용할 수 있다. 적용 방법은 styled.tagName과 같이 작성한 뒤, 적용하고자 하는 CSS 스타일을 작성하면 된다.

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
`;

 

 

Styled Components에서는 props를 통해 각각의 컴포넌트마다 원하는 속성을 적용할 수 있다.

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box bgColor={"#574b90"} />
    </Wrapper>
  );
};

 

 

styled(ComponentName)와 같이 컴포넌트명을 괄호 안에 넣어주면, 같은 속성을 상속받을 수 있다.

const Circle1 = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
  border-radius: 50%;
`;

const Circle2 = styled(Circle1)`

`

const App = () => {
  return (
    <Wrapper>
      <Circle1 />
      <Circle2 />
    </Wrapper>
  );
};

 

 

 

as 속성

Box가 너무 예뻐서 다른 곳에서 버튼으로도 사용하고 싶어질 수가 있다..! 하지만 Box는 div로 정의되어 있고, 원래의 Box와 동시에 사용하면서 중복되는 코드도 만들고 싶지 않다.

그럴 때는 아주 간단하게 컴포넌트의 태그에 as 속성을 추가해주면 된다.

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box as="button" bgColor={"#574b90"} />
      <Circle bgColor={"black"} />
    </Wrapper>
  );
};

as 속성만 추가했는데 성공적으로 button 태그로 바뀐 것을 확인할 수 있다.

 

 

속성 추가

required 속성을 가진 input 태그가 여러 개 필요할 경우, 각각의 태그마다 required 속성을 추가하는 것은 매우 번거롭고 귀찮다. 만약 수정할 일이 생긴다면, 하나씩 변경하는 것은 더더욱 귀찮을 것이다.

Styled Components에서는 html 태그의 속성도 지정할 수 있다.

 

const Input = styled.input.attrs({ required:true })`
    background-color: orange;
    margin-right: 5px;
`;

 

required 속성이 성공적으로 적용되었다! 만약에 여러 속성을 주고 싶다면, 다음과 같이 사용하면 된다.

const Input = styled.input.attrs({ required:true, maxLength:10 })`
    background-color: orange;
    margin-right: 5px;
`;

 

 

애니메이션

Styled Components를 통해 애니메이션을 넣기 위해서는 keyframes를 import 해야 한다.

import {keyframes} from "styled-components";

간단하게 Circle에 색깔이 바뀌는 애니메이션을 추가해보자.

import {keyframes} from "styled-components";

const CircleAnimation = keyframes`
  0% {
    background-color:red;
  }
  33% {
    background-color:green;
  }
  66%
  {
    background-color:blue;
  }
  100% {
    background-color:red;
  }
`;

const Circle = styled(Box)`
  border-radius: 50%;
  animation: ${CircleAnimation} 3s linear infinite;
`;

const App = () => {
  return (
    <Wrapper>
      <Circle bgColor={"red"} />
    </Wrapper>
  );
};

주의해야 할 점은, 애니메이션을 컴포넌트보다 먼저 정의해주어야 성공적으로 애니메이션이 적용된다. 순서가 바뀐다면 아래와 같은 에러 메세지를 볼 수 있을 것이다.

'CircleAnimation' was used before it was defined no-use-before-define

 

 

가상 선택자

Box 컴포넌트 안에서 자식 요소인 span을 선택할 수 있다.

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;

  span {
    background-color: black;
  }
`;

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"}>
        <span>얍</span>
      </Box>
    </Wrapper>
  );
};

 

 

 

span 위에 마우스를 올렸을 때(hover), 배경 색상을 바꾸기 위해서는 두 가지 방법이 있다.

// 방법 1
const Box = styled.div`

span {
  background-color: black;
}
span:hover {
  background-color: white;
}
`;


// 방법 2
const Box = styled.div`

span {
  background-color: black;
  
  &:hover {
    background-color: white;
  }
}
`;

&는 자기 자신을 가리킨다.