Styled-components

📚 Styled-components

Styled-components란?

JS 내에서 CSS 코드를 적용할 수 있게 해주는 라이브러리. 리액트로 개발하다 보면 굉장히 많은 페이지 파일들과 태그들이 생길 수밖에 없는데, CSS 파일을 따로 추가하거나 Class name을 고민하지 않아도 되므로 매우 편리하다. ✨

설치

npm install styled-components

yarn add styled-components

설치 후 사용하고자 하는 JS 파일 내에
👉🏻  import styled from 'styled-components';

문법

const (사용할 컴포넌트명) = styled.(태그명)`
CSS code ~ ..

✅ CSS 코드는 꼭 백틱 ``으로 감싸줘야 한다. 또한 컴포넌트 이름이기 때문에 시작은 대문자로!

예시

import styled from "styled-components";
function App() {
  const Father = styled.div`
    display: flex;
  `;
  const BoxOne = styled.div`
    background-color: teal;
    width: 100px;
    height: 100px;
  `;
  const BoxTwo = styled.div`
    background-color: tomato;
    width: 100px;
    height: 100px;
  `;
  const Text = styled.span`
    color: white;
  `;

  return (
    <Father>
      <BoxOne>
        <Text>Hello</Text>
      </BoxOne>
      <BoxTwo />
    </Father>
  );
}

export default App;

출력 화면

위 코드는 화면과 같은 결과가 출력된다. 기존의 CSS 파일을 추가해서 style을 주는 것보다 훨씬 직관적이고 태그의 중복성이 없어지므로 깔끔해진다! 또한 컴포넌트들을 재사용하는 것도 가능하므로, 코드의 재사용성이 높아진다.

Adapting & Extending

💡 위 코드의 BoxOne과 BoxTwo는 background-color만 다른 사실상 거의 같은 코드이다. 이 코드들을 좀 더 간결하고 중복 없이 작성할 수는 없을까?

const Father = styled.div`
  display: flex;
`;
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;
const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

다음과 같이 수정하여, 각 컴포넌트에 bgColor라는 파라미터를 넣어 각각 다른 배경색을 적용할 수 있도록 함! 다양한 값들을 props로 넘겨주어 조건부 스타일링이 가능하다. 또한 Box 컴포넌트에 border-radius 속성을 추가하여 Box 컴포넌트를 확장한 Circle 컴포넌트를 만들어 사용할 수 있다.


출력 화면

As & Attrs

💡 어떤 컴포넌트의 스타일은 그대로, 태그명만을 바꾸어 사용하고 싶을 때 사용한다.

< 컴포넌트명 as = "원하는 태그명" />

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <>
      <Btn>Log in</Btn>
      <Btn as="a" href="/">
        Log in
      </Btn>
    </>
  );
}

export default App;

💭 속성을 준 컴포넌트를 여러 번 사용할 때, 속성을 컴포넌트마다 적용해주어야 함. 🤨 Attrs를 사용하여 이러한 중복 코드를 줄일 수 있다.

const (사용할 컴포넌트명) = styled.(태그명).attrs( {적용하려는 속성} )``

const Father = styled.div`
  display: flex;
`;

const Input = styled.input.attrs({ required: true })`
  background-color: tomato;
`;

function App() {
  return (
    <Father as="header">
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );
}

👉🏻  required: true 속성을 일일히 부여하지 않아도 됨!

Animations & Pseudo Selectors

💡 애니메이션 적용하기

import styled, { keyframes } from "styled-components";

const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50% {
    border-radius:100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius:0px;
  }
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover {
      font-size: 48px;
    }
    &:active {
      opacity: 0;
    }
  }
`;

👉🏻  animation: ${keyframes로 정의한 스타일 컴포넌트명} 으로 애니메이션 적용 가능하다.

function App() {
  return (
    <Wrapper>
      <Box>
        <span>🐬</span>
      </Box>
    </Wrapper>

✅ Box라는 스타일 컴포넌트 내의 스타일 컴포넌트가 아닌 요소도 선택자로 지정하여 스타일링이 가능함!

• &: : 자기 자신을 지정하는 선택자.
• (태그명) : 해당 스타일 컴포넌트 내의 태그를 지정하는 선택자.
• ${스타일 컴포넌트명} : 해당 스타일 컴포넌트 내의 스타일 컴포넌트를 지정하는 선택자.

출력 화면

Theme

💡 다크 모드, 라이트 모드 테마 변환 등에 사용하는 theme. 객체 형식으로 index.js에 import 하여 모든 페이지에서 스타일을 가져다 사용할 수 있다.

축제 사이트 만들 때 처음 사용해 봤는데, 타이포라든지 자주 사용되는 테마 색이라든지 중복되는 스타일들을 미리 지정해놓고 간단하게 가져다 쓸 수 있어 매우 편리했음! 🥹

index.js

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

✅ themeProvider에 props로 theme 넘겨주기!

적용

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  background-color: ${(props) => props.theme.backgroundColor};

👉🏻  다크 모드, 라이트 모드가 props로 넘겨준 theme에 따라 구분되게 된다.

Nomad Coders React JS 마스터 클래스 #2