[React JS 마스터클래스] Styled Components

리액트에 CSS 적용하는 3가지 방법

1. CSS 파일 만들어서 import

2. style prop으로 자바스크립트 객체로 스타일 코드 넣어주기 style={{ }}

3. CSS 모듈 사용하기 ~~.module.css

CSS 모듈 방식은 className을 랜덤하게 만들어 줘서 이름이 겹칠 걱정 필요 X

 

 

 

styled components

styled components는 다크 모드, 라이트 모드같은 걸 엄청 쉬운 방식으로 만들 수 있게 도와준다

npm i styled-components

 

백틱(``) 안에 css 코드 쓰기

const Father = styled.div``

 

styled를 import 하고 HTML 태그 사용하기

import styled from "styled-components";

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

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

export default App;

 

중요한 건 styled components에서 import 한 styled를 이용하는 것

점 찍고 사용하고 싶은 태그명 입력 -> 유효한 HTML 태그여야 한다

sytled component는 알아서 class명을 짓고 style 분류

 

컴포넌트를 설정 변경이 가능한 형태로 만들려면 props로 컴포넌트에 데이터 보내기

props는 컴포넌트에 데이터를 보내는 방법

props.bgColor의 bgColor 부분이랑 Box에 넘겨주는 bgColor은 이름이 같아야 한다

import styled from "styled-components";

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

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

export default App;

 

 

 

 

컴포넌트 확장하기

styled( ) 괄호 사이에 확장하려는 컴포넌트 이름 입력

새로운 컴포넌트를 만들어 낼 때 기존 컴포넌트의 모든 것을 가져와 새로운 것을 더하기

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

 

as

as를 사용해 엘리먼트를 다른 엘리먼트로 교체 가능

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

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

 

attrs

styled components가 컴포넌트를 생성할 때 attrs로 HTML 태그의 속성값 설정 가능

<Input required />
<Input required />
<Input required />
<Input required />

이렇게 하는 대신에 ↓

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

 

 

styled component에서 keyframes helper를 사용하면 앱 전체에서 사용할 수 있는 고유한 인스턴스 생성

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

const Wrapper = styled.div`
  display: flex;
`;
const rotationAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius:0px;
  }
  50%{
    border-radius:100px;
  }
  100%{
    transform:rotate(0deg);
    border-radius:0px;
  }
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  backgroud-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
`;

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

export default App;

 

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

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

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: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  span {
    font-size: 36px;
  }
`;

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

export default App;

Box 안에 있는 span 선택 가능

꼭 모든 component에 styled component 처리를 해 줄 필요 X

 

span {
    font-size: 36px;
  }
span:hover {
    
  }

span {
    font-size: 36px;
    &:hover {
    }
  }

위의 두 코드는 같은 의미

&는 span을 호명하는 것과 같다

 

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

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;
  ${Emoji}:hover {
      font-size: 98px;
    }
`;

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

${Emoji} 처럼 styled component 자체를 타겟팅 할 수 있다

 

theme은 기본적으로 모든 색상들을 가지고 있는 object

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

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;

ThemeProvider에서 가져온 색들 중 구체적인 색상을 정하고 ThemeProvider 안에 둘러싸인 모든 컴포넌트는 ThemeProvider에 접근 가능

두 개의 theme이 동일한 property 이름을 가지고 있다면 우리가 theme을 전환해 줄 때 컴포넌트를 따로 바꿔줄 필요 없다

dark/light mode를 가지고 싶다면 property들의 이름이 똑같아야 한다!