styled-components

자바스크립트 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리이다. 리액트개발에서 주로 사용되는 라이브러리이다.

styled-components 장점

• 스타일이 다른 js파일로 오염되지 않음
• 페이지 로딩시간 단축
  

styled-components 단점

• JS파일 매우 복잡해짐
• 중복스타일은 컴포넌트간 import 할텐데 CSS와 다를 바가 없다.
• 협업시 CSS 담당의 숙련도 이슈

styled-components 설치

npm i styled-components

TypeScript 안에서 설치
npm i --save-dev @types/styled-components

기본 문법

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 (
    <div className="App">
      <Father>
        <BoxOne>
          <Text>Hello</Text>
        </BoxOne>
        <BoxTwo />
      </Father>
    </div>
  );
}

export default App;

다른 컴포넌트의 스타일을 상속

import styled from "styled-components"

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 (
    <div className="App">
      <Father>
        <Box bgColor="yellow" />
        <Circle bgColor="tomato" />
      </Father>
    </div>
  );
}

export default App;

속성 추가, 태그 변경

attrs
해당 태그에 속성 추가.

as
태그 변경

<참고>
minLength = "10"
값이 비어 있거나 10자 이상이어야 유효하다.

required

• 속성은 boolean 속성이다.
• <input> 태그의 required 속성은 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시한다.
• 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.

import styled from "styled-components";

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

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

export default App;

4️⃣ styled-components X animation

• styled-components 에서 애니메이션을 주는 방법은 keyframes 작성.
• animation 이름 설정할 때 string interporation(${})사용

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

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

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

  span{
    font-size: 36px;
    &:hover{
      font-size: 40px;
    }
    &:active{
      opacity: 0;
    }
  }

`
// &:hover = span:hover

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

export default App;

${Emoji}는 span이나 p로 지정하게 되면 태그가 바꼈을 때 대응을 못하기 때문에 변수를 정해준다.

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

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

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

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

  ${Emoji}{
    &:hover{
      font-size: 98px;
    }
  }
`

function App(){
  return(
     <Wrapper>
        <Box>
          <Emoji as="p">🔥</Emoji>
        </Box>
        <Box>
          <Emoji as="h1">✨</Emoji>
        </Box>
     </Wrapper>
  )
}

export default App;

5️⃣ Theming

styled components는 TehmeProvider wrapper 컴포넌트를 통해 전체 테마를 지원한다.

이 컴포넌트는 컨텍스트 API를 통해 자체 아래에 모든 React 구성 요소에 테마를 제공한다.

렌더 트리에서 모든 스타일 구성 요소는 여러 수준의 깊이에 있는 경우에도 제공된 테마에 액세스 할 수 있다.

ex) ThemeProvieder theme = {theme}

https://styled-components.com/docs/advanced

the theme prop

theme는 theme prop을 사용하여 컴포넌트로 전달 될 수도 있다.
ex) color: ${props => props.theme.main};

https://styled-components.com/docs/advanced#the-theme-prop

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

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        {/* themeProvider는 prop 하나가 필요하다. */}
        <ThemeProvider theme={darkTheme}>
            <App />
        </ThemeProvider>
  </React.StrictMode>
);

// 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;
  backgruond-color:${(props) => props.theme.backgruondColor);
`;

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