[React] Styled Components 사용 방법

React에서 Styled Components를 사용하는 방법에 대해 알아보겠습니다.

설치

Visual Studio Code를 사용 시 Styled-Component 자동 완성을 위해 vscode-styled-components 플러그인을 설치합니다.

$ npm i styled-components

• https://styled-components.com/

사용 예

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;

확장

컴포넌트를 확장하는 방법입니다.

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

'As' and Attrs

아래와 같이 as 속성을 사용하여 값을 a 로 지정하면 button 태그가 a 태그로 변경됩니다.

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

<Btn as="a">Log in</Btn>;

속성 값 설정

attrs을 사용하여 HTML 태그에 속성 값을 설정할 수 있습니다.

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

Animation

keyframes 를 추가하고, Animation을 설정합니다. 그리고 styled components에 ${} 를 통해 설정된 변수를 지정합니다.

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

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

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

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

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

export default App;

Theme

index.js 파일에서 ThemeProvider를 styled-components로부터 Import 한 후 App 태그를 감쌉니다. Theme에 어떤 색을 사용할 건지 설정합니다.

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

위에서 설정한 Theme 변수를 사용합니다. Theme가 변경되면 Title이나 Wrapper 안의 글자 색상과 배경색이 변화되는 것을 확인할 수 있습니다.

import styled from 'styled-components';

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

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

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

export default App;