[React] Styled components

💡 styled components 란?

JavaScript와 React 또는 React Native를 사용하여

웹 및 모바일 애플리케이션의 스타일을 관리하기 위한 라이브러리!

 

CSS를 JavaScript 파일 내부에 직접 작성하는 방식으로 스타일을 정의하고 적용

 

✅ 장점

- styled-components를 사용하면 스타일을 컴포넌트 수준에서 정의할 수 있음

  각 컴포넌트에 대한 스타일을 독립적으로 정의하고 재사용할 수 있음

- 컴포넌트와 스타일을 논리적으로 그룹화하고 관리할 수 있음

 

---

패키지 설치

$ npm i styled-components

 

💡 사용 방법

import styled from "styled-components";

styled-components를 import 해줘야 한다

 

- styled.tagName로  선언해주고 안에 원하는 css를 작성하면 된다

- HTML 엘리먼트를 스타일링 할 때는 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에

해당 태그명의 속성에 접근한다

 

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>
  );
};



export default App;

요소들을 감싸주는 Wrapper와 BoxOne,BoxTwo를 선언해주었다

그치만 같은 weight,height를 갖는 Box를 두번 선언하게 되는 번거로움이 발생!!

 

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

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

 

props를 통해 각각의 컴포넌트마다 원하는 속성을 적용할 수 있다!

위의 경우 background-color를 props로 받아 색상만 변경시킬 수 있다

 

as 속성

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

as 속성을 이용해 <div>로 감싸진 태그를 버튼으로도 활용이 가능하다!

이렇게 하면 재활용이 용이해진다

 

Keyframes으로 에니메이션 효과 주기

import {keyframes} from "styled-components";

keyframes를 import 해준다

const CircleAnimation = keyframes`
  0% {
    background-color: #FFC0C0;
  }
  33% {
    background-color: #FF9E9E;
  }
  66% {
    background-color: #FF5656;
  }
  100% {
    background-color: #FF6F6F;
  }
`;

시간에 따라 배경색이 변경되는 CircleAnimation이라는 keyframes를 정의한다

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

이 컴포넌트는 Box 컴포넌트를 확장하며 border-radius 속성을 사용하여 원 모양으로 만들고,

CircleAnimation 애니메이션을 적용하여 배경색이 변화하도록 한다

그리고 애니메이션은 3초 동안 반복하게 해주었습니다

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

결과!!