[React] styled-components 정리

styled-components를 사용하는 이유

일반적인 CSS 모듈 방식로 작업할 경우, 코드 가독성이 떨어진다.
html tag보다 무슨 뜻인지 한 눈에 알 수 있는 component 명을 짓는 것이 유리함.
직접 style 속성을 부여할 경우, hover, active와 같은 속성을 사용할 수 없다.

styled-components의 기본 사용법

import styled from "styled-components";

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

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

export default App;

styled-components 라이브러리 설치 후, 간단한 네모를 만드는 과정에서 활용해보았다.
기본 형태는 아래와 같다.

const (component이름) = styled.(html태그)`
여기에 css 작업하면 됨
`
<(component이름)/> 으로 사용

styled-components에서 props를 사용하는 방법

위에서 Box를 만들었는데, 만약 두개의 Box를 보여주고 싶은 경우를 생각해보자.
단, 두 Box는 색만 다르고 나머지 style은 동일하다.
이 경우, Box1, Box2로 두 컴포넌트를 만드는 것은 비효율적이다.
이때, props를 활용하면 한 컴포넌트로 두 박스를 만들 수 있다.

//2개의 컴포넌트를 만드는 비효율적인 방법
const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

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

//하지만 props를 사용하면 한 컴포넌트로 해결 가능
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

//사용하기 위해서는 props를 넘겨줘야 한다.
function App() {
  return (
    <div>
      <Box bgColor="teal"></Box>
      <Box bgColor="black"></Box>
    </div>
  );
}

기존 컴포넌트의 속성을 가져오고, 추가로 속성을 부여하는 방법

만약 Box에서 약간의 속성을 추가하여 Circle이라는 컴포넌트를 만들고 싶다면?
Box의 속성을 다시 한 번 타이핑하지 않아도 그대로 가져올 수 있다.

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

//Box에 border-radius를 추가한 Circle
const Circle = styled(Box)`
border-radius: 50px;
`;

as를 통해 스타일 속성은 같으나 html태그를 다르게 사용할 수 있다

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

//Box는 div이지만 as를 사용하면 다른 태그로 사용할 수 있다.
function App() {
  return (
    <div>
      <Box as="span"></Box>
    </div>
  );
}

attrs를 활용해 컴포넌트가 기본적으로 어떤 어트리뷰트를 가질지 설정해줄 수 있음

만약 여러개의 input을 만들었는데, 모두 다 필수 입력(required)으로 설정하려면?
input마다 일일히 required를 적지 말고, styled-components의 attrs를 활용하자.

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

styled-components 적용할때 컴포넌트 분리하는 방법

//App.js에서 Box 컴포넌트를 사용
function App() {
  return (
    <div>
      <Box></Box>
    </div>
  );
}

//Box.js로 컴포넌트를 분리
import styled from "styled-components";

const StyledBox = styled.div`
  height: 100px;
  width: 100px;
  background-color: blue;
`;

function Box() {
  return <StyledBox></StyledBox>;
}

export default Box;
//Box컴포넌트는 StyledBox 컴포넌트를 반환한다. StyledBox를 스타일링.

keyframes로 애니메이션 적용하기

import { keyframes } from "styled-components";

//%로 사용하거나, from{} to{}로 사용하거나.
//어떤 애니메이션을 줄까? rotateAnimation을 먼저 만들자.
export const rotateAnimation = keyframes`
0% {
  transform: rotate(0deg);
  border-radius: 0px;
}
50%{
  transform: rotate(360deg);
  border-radius: 50px;
}
100% {
  transform: rotate(0deg);
  border-radius: 0px;
}
`;

//rotateAnimation을 사용하는 방법
import styled from "styled-components";
//import 하고,
import { rotateAnimation } from "../styles/rotateAnimation";

const StyledBox = styled.div`
  height: 100px;
  width: 100px;
  background-color: blue;
  animation: ${rotateAnimation} 1s linear infinite;
`;
//${}로 사용한다.

component 안의 요소를 스타일링 하는 방법

만약 Box라는 컴포넌트 안에 span이 들어가있고, span을 스타일링 하고싶다면?

function App() {
  return (
    <div>
      <Box>
        <span>안녕하세요</span>
      </Box>
    </div>
  );
}

//span을 스타일링 하려면 Box 컴포넌트로 가자.
const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: red;
  span { font-size: 50px }
`;
//이렇게 사용하면 된다.

hover, active등을 사용하는 방법

const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: red;
  span {
    font-size: 15px;
    &:hover {
      font-size: 30px;
    }
  }
`;
//이렇게 작성하면, Box안의 span이 기본값으로 15px을 갖지만, 마우스를 hover하면 30px로 커진다.

tag name을 사용하지 않고 component 명으로 타겟팅하는 방법

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

function App() {
  return (
    <div>
      <Box>
        <span>안녕하세요</span>
      </Box>
    </div>
  );
}
//이렇게 짤 경우, Box에서 정한 span의 스타일은 span이어야만 적용되는 스타일이다.

  <Box>
     <p>안녕하세요</p>
  </Box>
//이렇게 p태그로 수정해버리면 스타일 적용 안됨.

const Text = styled.span`
  font-size: 15px;
`;

const Box = styled.div`
  height: 100px;
  width: 100px;
  background-color: red;
  ${Text}{ color: blue; }
`;

  <Box>
     <Text as="div">안녕하세요</Text>
  </Box>
//이렇게 하면 Text의 tag가 div건 무엇이든 간에 적용된다.

dark mode를 구현하기 위한 ThemeProvider

import { ThemeProvider } from "styled-components";
//index.js에서 ThemeProvider를 import

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

const lightTheme = {
  textColor: "#111",
  backgroundColor: "whitesmoke",
};
//두 가지 theme를 만들어준다. 반대되는 색으로 dart/light를 설정

  <ThemeProvider theme={darkTheme}>
    <App />
  </ThemeProvider>
//App을 ThemeProvider로 감싸준다. 이러면 App에서 props를 사용하듯이 theme로 darkTheme를 꺼내 쓸 수 있음.

const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;
//App에서 사용하면 whitesmoke색의 Title이 나타난다.