[React] 07. React에 styled-component 사용하기

 

React에서 컴포넌트를 스타일링하는 방법에는 여러 가지가 있습니다.

그중에서도 가장 많이 선호되는 styled-components에 대해 공부해보겠습니다.

# styled-component

styled-components란, 자바스크립트 파일에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리입니다.

 

아래 명령어를 사용하여 프로젝트에 설치하여 줍니다.

npm install --save styled-components

 

먼저, 파일 상단에 다음과 같이 styled-componentes에서 styled를 임포트 합니다.

import styled from 'styled-components';

 

HTML 요소에 원하는 스타일을 적용하여 Button 변수에 저장합니다.

export const Button = styled.button`
  
  border : none;
  outline: none;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  cursor: pointer;

  padding: 10px 80px;
  background: black;

  &:hover,
  &:active {
   background: gray;
  }
`;

 

만들어진 Button을 다음과 같이 사용할 수 있습니다.

const ShowText: React.FC = () => {

  return (
    <>
          <Button>BUTTON</Button>

    </>
  );
};

 

또한, styled-components에서는 React 컴포넌트로 넘어온 props에 따라 다른 스타일을 적용할 수 있습니다. Tagged Template Literals을 사용하기 때문에 템플릿 사이사이에 들어가는 자바스크립트 객체나 함수의 원본 값을 그대로 추출할 수 있습니다. 

export const Button = styled.button`
  border : none;
  outline: none;
  border-radius: 4px;
  font-weight: bold;
  color: white;
  cursor: pointer;

  padding: 10px 80px;
  background: ${(props) => props.color || "pink"};

  &:hover,
  &:active {
   background: gray;
  }
`;

 

다음은 버튼의 배경색을 props에 따라 바뀌도록 위에 코드를 변경한 예시입니다. ||(OR)연산자를 사용하여 props가 없는 경우에는 'pink'가 버튼색으로 적용되어 나타납니다.

const ShowText: React.FC = () => {

  return (
    <>
          <Button color='black'>BUTTON</Button>
          <br/>
          <Button>BUTTON</Button>

    </>
  );
};