[React] Styled Components 로 React 스타일하기.

Styled Components 란?

• JavsScript 파일 내에서 CSS를 사용할 수 있게 해주는 React 프레임워크를 주요 대상으로 한 Library 이다.
• 모든 스타일은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함시킨다.
• 컴포넌트를 쉽게 만들 수 있으며, 코드가 간결해지고 깔끔해진다.
• styled를 설치한 뒤, import 해주고 사용할 HTML tag를 선택하여 사용하면 된다.

1. 설치.

npm install styled-components

✔︎ styled-components 공식 홈페이지

2. 사용 방법.

import styled from "styled-components";

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

const Box = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

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

export default App;

3. 컴포넌트 확장.

① 컴포넌트에 데이터 보내기.

• prop을 작성한뒤, 컴포넌트에서 받아서 사용하면 된다.

import styled from "styled-components";

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

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

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

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

export default App;

---

② 같은 스타일 사용하기.

import styled from "styled-components";

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

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

const Circle = styled(Box)` //Box 에있는 스타일을 공통으로 사용.
  border-radius: 50%; //Circle만 가지는 스타일.
`;

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

export default App;

---

4. 컴포넌트에 속성값 설정하기.

• styled.(tag name).attrs({ 오브젝트 작성 })

import styled from "styled-components";

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

const Input = styled.input.attrs({ required: true, minLength: 10 })`
  background-color: gray;
`;

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

export default App;

---

---

5. styled component에서의 Animation

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

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

const rotation = keyframes`
  from{
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Box = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
  animation: ${rotation} 2s linear infinite;
`;

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

export default App;

---

6. 컴포넌트 안에있는 요소에 접근하기.

const Box = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
  span {
    font-size: 36px;
  }
`;

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

---

• tag명이 아닌 새로운 컴포넌트를 만들고 생성한 컴포넌트 명으로 사용할 때.

const Rockets = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
  ${Rockets} {
    font-size: 36px;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Rockets>🚀</Rockets>
      </Box>
    </Wrapper>
  );
}

---

7. ThemeProvider

• 기본적으로 모든 색상을 가지고 있는 Object 이다.

• 모든 컴포넌트에게 theme 속성을 전달하는 역할을 한다.

• ThemeProvider 를 import 해준뒤에, 공통 속성을 사용할 루트에 ThemeProvider로 감싸주면 된다.

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

const root = ReactDOM.createRoot(document.getElementById("root"));

const darkTheme = {
  textColor: "white",
  backgroundColor: "black",
};

root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

위와 같이 ThemeProvider로 감싸주게 되면, App.js 내에서 theme 속성에 접근하여 사용 할 수 있다.

import styled from "styled-components";

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

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

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

export default App;