[react] styled components 정리

Styled Components

하나의 파일 안에서 JS와 CSS를 모두 관리한다는 장점이 있는 Styled Components에 대해 알아보자.

우선 Styled Components를 사용하기 위해서는 설치를 해야한다.

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

$ npm i styled-components

설치가 성공적으로 됐는지 확인하기 위해서는 Package.json 파일에 디펜던시를 확인해본다.

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
}

기본 문법

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

import styled from "styled-components";

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

<script>
import styled from "styled-components";

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

const BoxOne = styled.div`
  background-color: #cf6a87;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: #574b90;
  width: 100px;
  height: 100px;
`;

const App = () => {
  return (
    <Wrapper>
      <BoxOne />
      <BoxTwo />
    </Wrapper>
  );
};
</script>

중복 제거

Styled Components는 props를 통해 각각의 컴포넌트마다 원하는 속성을 적용할 수 있게 해주기 때문에 중복된 속성이 있을 경우 하나의 styled만 작성한 뒤 props로 개개인의 속성을 지정하며 중복을 제거할 수 있다.

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

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

상속, 확장

Box 컴포넌트와 같은 크기를 가지고 하나의 속성만 더 추가된 Circle을 만들 때 상속으르 사용할 수 있다.

<script>
const Circle = styled(Box)`
  border-radius: 50%;
`

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

styled(ComponentName)과 같이 작성해주어 Box 컴포넌트의 스타일을 상속 받을 수 있다.

as 속성

똑같은 스타일을 가지는데 div 대신 button 태그를 쓰고 싶어질 때 사용할 수 있는 속성

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

as 속성을 이용해 바꾸고자 하는 태그를 작성하면 내가 원하는 태그로 만들어지고, Box와 똑같은 속성을 사용할 수 있다.

Html 태그 속성 추가

html 태그의 속성을 따로 태그 하나마다 지정 할 필요없이 styled components에서 공통으로 지정할 수 있다.

<script>
// styled.tag.attrs({ 속성추가 })
// styled.tag.attrs({ 속성, 속성 }) ,을 이용해 여러개 지정 가능
const Input = styled.input.attrs({ required:true })`
    background-color: orange;
    margin-right: 5px;
`;
</script>

styled components에 애니메이션 추가

Styled Components를 통해 애니메이션을 만들기 위해서는 ketframes를 import 해준다.

import {keyframes} from "styled-components";

<script>
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 Circle = styled(Box)`
  border-radius: 50%;
  animation: ${CircleAnimation} 3s linear infinite;
`;
</script>

애니메이션 스타일을 스타일 컴포넌트보다 위에 먼저 지정해야 하는 점을 주의하자

가상 선택자

Box 컴포넌트 내부에 있는 span 태그의 hover와 같은 효과를 주고 싶을 때

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

  display: flex;
  justify-content: center;
  align-items: center;

  span {
    background-color: black;
  }
`;

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

첫번째 방법

<script>
const Box = styled.div`

생략...

span {
  background-color: black;
}
span:hover {
  background-color: white;
}
`;
</script>

두번째 방법

<script>
const Box = styled.div`
span {
  background-color: black;
  
  &:hover {
    background-color: white;
  }
}
`;
</script>