리액트 Styled Components

오늘은 리액트에서 가장 많이 사용되는
Styled Components의 간단한 사용법을 정리 해보겠습니다.

사용 준비

1. npm 설치

npm install styled-components

2. 원하는 파일에서 import

import styled from 'styled-components';

스타일드 컴포넌트 만들기

1. 원하는 HTML 태그 중 div 를 선택하고 CSS를 적용하여 Box 변수에 저장한다.

const Box = styled.div`
  height: 200px;
  width: 200px;
`;

2. 이렇게 컴포넌트 태그 형식으로 사용가능. 코드가 훨씬 깔끔해짐

<Box> </Box>

CSS 중복 코드 최소화 방법

1. 중복되는 CSS 코드의 특정 몇 속성을 바꾸고 싶을 땐
   props를 사용해 동적으로 바꿀 수 있다.

background-color: ${(props) => props.bgColor};

<Box bgColor="tomato" />
<Box bgColor="teal" />

2. 중복되는 CSS 코드에 더 추가하고 싶을 때 styled( )로 확장할 수 있다.

const Circle = styled(Box)`
  border-radius: 50%;
`;

스타일 컴포넌트 소소한 팁

1. Box 스타일 컴포넌트가 div 태그인데 스타일은 같고
   div를 a 태그로 바꾸고 싶을 때

<Box as="a" />   // as="변경할 태그" 형식으로 변경 가능함

2. 스타일 컴포넌트 태그에 속성주기

const Input = styled.input.attrs({ required: true, maxlength: 10 })

애니메이션 적용

const rotateAni = keyframes` // keyframes으로 애니메이션 코드를 필요한 순간에 재사용 할 수 있다.
  (애니메이션 CSS 코드) 
`;

const Box = styled.div`
  animation: ${roateAni} 1s linear infinite;
`;

Theme (다크 모드, 라이트 모드 적용 방법)

import { ThemeProvider } from "styled-components";

ThemeProvider를 최상위 태그로 감싸주고
props로 theme을 주는데 커스텀한 Theme을 props로 주면
스타일 컴포넌트에서 동적으로 속성을 처리한다.

예를 들어 background-color: ${(props) => props.theme.backgroundColor}; 처럼 동적으로 CSS 속성을 변경하기 때문에

스타일드 컴포넌트 입장에서는 어떤 값이든 props로 오는 값에 따라 적용되는 것이다.

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

const lightTheme = { 
  textColor: "#111",
  backgroundColor: "whitesomke",
};
 
<ThemeProvider theme={darkTheme}>
  <App />
</ThemeProvider>

스타일드 컴포넌트를 사용하게 되면 자동 완성, 하이라이트 기능 등이 지원 되지 않는데

이는 vscode-styled-components 익스텐션으로 해결 가능함!