[React.js] Styled Component

Styled Component

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

 

기존 웹사이트를 개발할 때는 HTML과 CSS, 자바스크립트 파일을 각각 별도의 파일로 두는 것을 관례로 하였지만, React, Vue, Angular 등과 같은 프레임워크, 라이브러리들이 인기를 끌면서 웹 개발의 패러다임이 바뀌게 되었다. 이들은 웹 페이지를 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, 자바스크립트를 종합하는 패턴으로 구성하는 컴포넌트 기반 개발 방법을 주류로 올려놓게 되었다. 따라서 CSS 방식에서도 CSS-module 등을 사용하여 CSS 파일을 외부로 분리하는 방법이 아닌 Styled Component를 사용하여 자바스크립트 파일 안에 삽입하는 CSS-in-JS 방식이 트렌드가 되었다.

 

Styled Component를 사용하면 컴포넌트 자체에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고, 자바스크립트에 영향을 받는 스타일링을 더욱 간편하게 구현할 수 있다.

 

Styled Component 사용 방법

• 패키지 설치
  - npm i styled-components
  
  
• styled 함수 import
  - import styled from "styled-components"; 
  
  
• 기본 사용 방법
  - styled.사용할 태그 뒤에 백틱(``) 추가 후 백틱 안에서 CSS 스타일링

 

 

기존 CSS 스타일링 방식

const divStyle = {
    backgroundColor: "white",
    width: "100px",
    height: "100px",
};

function App() {
  return <div style={divStyle}></div>;
}

 

Styled Component를 사용한 방식

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

function App() {
  return <StyledDiv>Hello World!</StyledDiv>;
}

 

기존의 리액트 컴포넌트 스타일링 방식은 jsx의 style 속성에 객체를 전달하거나 className을 설정하고 별도의 css 파일을 import 하는 방식으로 사용해왔다. 

 

styled component는 스타일이 적용된 컴포넌트를 직접 생성하기 때문에, 스타일링을 위한 코드 사용량이 줄어들고 key-value의 형태가 아닌 기존 CSS 문법을 그대로 사용하기 때문에 가독성도 훨씬 좋다. 또한 임의의 클래스 명을 자동으로 생성해주기 때문에 className이 중복되는 등 혼선을 방지할 수 있다.

---

Styled Component 응용 

1. props로 개별 스타일 속성 적용하기

const Wrapper = styled.div`
  display: flex;
  width: 100px;
  height: 100px;
`;
const Text = styled.h1`
  color: ${(props) => props.textColor}; //전달받은 컬러 적용
`;

function App() {
  return (
    <Wrapper>
      <Text textColor="red">Hello World!</Text>
      <Text textColor="blue">Bye World!</Text>
    </Wrapper>
  );
}

 

2. 확장 스타일링

const Wrapper = styled.div`
  display: flex;
  width: 200px;
  height: 200px;
`;

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

// 위 Box를 파라미터에 넣어 스타일 그대로 상속받고
//원하는 스타일 코드만 추가해줌 -> 중복 최소화
const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Wrapper>
      <Box bgColor="gray"></Box>
      <Circle bgColor="tomato" />
    </Wrapper>
  );
}

styled 함수의 매개변수로 상속받을 스타일 컴포넌트를 넘겨주어 해당 컴포넌트를 확장하여 스타일링 할 수 있다.

 

3. as를 사용하여 HTML 태그를 변경하기

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

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

// 스타일 컴포넌트에 as를 사용하여 사용될 태그를 변경
// 같은 스타일 컴포넌트에 지정된 태그로만 따르지 않아도 됨
function App() {
  return (
    <Wrapper>
      <Btn> Login </Btn>
      <Btn as="a" href="/">
        Login
      </Btn>
    </Wrapper>
  );
}

 

4. 스타일 컴포넌트에 공통 속성 적용하기 - attrs

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

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

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

 

5. pseudo selector

const StyledDiv = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;
  p {
    color: white;
  }
`;

function App() {
  return (
    <StyledDiv>
      <p>Title</p>
    </StyledDiv>
  );
}

 

6. 중첩된 스타일 컴포넌트

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

const StyledDiv = styled.div`
  background-color: black;
  width: 100px;
  height: 100px;
  ${Emoji} {
    :hover {
      font-size: 60px;
    }
  }
`;

function App() {
  return (
    <StyledDiv>
      <Emoji>😊</Emoji>
    </StyledDiv>
  );
}

 

7. 애니메이션 사용하기

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

const rotateAni = keyframes`
    from{
      transform: rotate(0deg);
    }
    to{
      transform: rotate(360deg);
    }
`;

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

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

애니메이션을 사용하기 위해서는 keyframes를 import한 뒤에, 애니메이션 변수를 선언하고 keyframes 뒤의 백틱(``) 사이에 애니메이션을 정의해주면 된다. 그리고, 스타일 컴포넌트의 animation 속성에 넣어주어 적용시킬 수 있다.

---