Styled Components

설치 및 기본 적용

• 설치
  npm i styled-components

• 컴포넌트 생성 및 적용

import styled from "styled-components";

const Main = styled.div`
  background: #555;
`;

function App() {
  return (
    <Main>
      <div>
        <h1>Hi</h1>
      </div>
    </Main>
  );
}

export default App;

규칙

• 컴포넌트 명의 맨 앞글자는 대문자여야 한다.
• styled 뒤에 붙는 태그는 유효한 HTML 태그여야 한다.
• 백틱(``) 내부에는 CSS 프로퍼티여야 한다.
• 생성된 컴포넌트는 임의의 className을 갖는다.
  • 컴포넌트가 같으면 className도 같다.
• 서순을 잘 지켜야 한다.
  • 컴포넌트가 먼저 정의되어야 프로퍼티로 사용할 수 있다.

Custom Props

• props를 이용해 커스텀 프로퍼티를 보낼 수 있다.

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

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

컴포넌트 props

• styled(component)를 통해 해당 컴포넌트가 가진 속성을 다른 컴포넌트의 기본 속성으로 이용할 수 있다.

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="tan" />
    </Father>
  );
}

as

• 컴포넌트의 스타일은 그대로 사용하면서 다른 태그의 기능을 추가하고 싶다면 as를 사용한다.

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

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

• 검사의 요소를 확인해 보면 button 대신 a임을 확인할 수 있다.

attrs

• attrs는 styled components에서 attributes를 추가하는 기능이다.
• 예를 들어, input에 required를 추가한다면, styled.input.attrs({ required: true })``;을 입력한다.

Animation

• 애니메이션 효과는 keyframes 함수를 불러와 사용한다.

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

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

const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${Rotation} 1s linear infinite;
`;

• keyframes에 사용하는 문법은 CSS에서의 애니메이션과 동일하다.

• 컴포넌트 적용 시에는 props와 마찬가지로 ${}를 사용한다.

  • 중괄호 안에는 애니메이션 컴포넌트 명을 적는다.

컴포넌트 내 자식 요소 스타일링

• 컴포넌트 내부의 태그에 스타일을 적용할 때는 새로운 컴포넌트를 생성할 필요 없이 내부에 작성한다.

import styled from "styled-components";

const Box = styled.div`
  span {
    font-size: 36px;
    &:hover {
      transform: scale(2);
    }
    &:active {
      opacity: 0;
    }
  }
`;

function App() {
  return (
    <Box>
      <span>😍</span>
    </Box>
  );
}

export default App;

• 부모 컴포넌트 내부에 자식 태그명을 입력하고 스타일을 적용한다.

• hover, active 등의 부가적인 효과는 &:효과와 함께 사용하거나 태그:효과로 사용한다.

  • &은 자기 자신을 의미한다.

내부 컴포넌트 스타일링

• 위처럼 구성하면 태그가 달라졌을 때 자동하지 않는 문제가 있다.
  • 예제에서 span을 p로 바꾸면 스타일이 적용되지 않는다.
• 컴포넌트를 속성으로 할당하는 기능을 통해 태그에 상관없이 스타일을 할당할 수 있다.

import styled from "styled-components";

const Happy = styled.span`
  font-size: 98px;
`;

const Box = styled.div`
  ${Happy}:hover {
    transform: scale(2);
  }
`;

function App() {
  return (
    <div>
      <Box>
        <Happy>😍</Happy>
      </Box>
      <Happy>💥</Happy>
    </div>
  );
}

• Box에 속해있는 Happy는 hover 효과를 받지만, 외부의 Happy는 효과 적용이 되지 않는다.

Themes

• index.js에 theme 프로퍼티를 설정해 하위 컴포넌트로 넘겨 커스텀 테마를 사용할 수 있다.

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

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

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

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

• ThemeProvider를 호출해 프로퍼티를 설정한다.
  • drakTheme와 lightTheme의 프로퍼티가 같기 때문에 설정에 따라 값만 바뀌게 된다.

// App.js
import styled from "styled-components";

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

function App() {
  return (
    <Wrapper>
      <Title>Hello</Title>
    </Wrapper>
  );
}

export default App;

• props를 통해 theme를 스타일링한다.
  • 하위 컴포넌트에서 스타일 값의 변화 없이 설정하려면 theme별 프로퍼티를 동일하게 설정해야 한다.
  • 예를 들어, darkTheme에 textColor와 backgroundColor를 가졌다면, lightTheme도 textColor와 backgroundColor를 가져야 한다.

---

참고
노마드 코더 - React JS 마스터 클래스