리액트에서 styled components 를 사용해서 컴포넌트 만들기

우선 styled componets 를 알기 전에 CSS in JS 가 뭔지 알고 지나가야 합니다.

CSS in JS

css 파일을 사용하지 않고 JavaScript 로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.

이렇게 쓰면 별도의 css 파일을 관리하지 않기 때문에 관리 포인트가 줄어들 수도 있고 컴포넌트 기반의 개발시 좀 더 유용한 패턴이 될 수도 있습니다. (하지만, 사용하는 사람마다 다름!) 그 중에 가장 유명한 라이브러리가 styled components 다~~~ 라고 알고 있으면 됩니다.

 

설치 및 사용법

아래 명령어를 이용해 설치해줍니다. npm 쓰시는 분들은 yarn add 빼고 npm install 넣으시면 됩니다!

yarn add styled-components

 

사용법은 아래와 같이 styled.div`` 를 사용해서 객체로 선언하여 초기화해줍시다!

  const ParentDiv = styled.div`
    display: flex;
    margin-top: 10px;
  `;

  const Button = styled.button`
    background: transparent;
    border-radius: 3px;
    border: 2px solid #bf4f74;
    color: #bf4f74;
    margin: 0 1em;
    padding: 0.25em 1em;
  `;

  const Input = styled.input`
    border-radius: 3px;
    border: 2px solid #bf4f74;
  `;
  
  // 사용
  <ParentDiv>
    <div>
      <Button>-</Button>
      <span>{count}</span>
      <Button>-</Button>
    </div>
    <Input />
  </ParentDiv>

 

다음과 같이 사용하여 스타일을 객체를 이용한 컴포넌트화를 통해 사용할 수가 있습니다.

이제 공통 컴포넌트화를 해보도록 하겠습니다.

우리가 가장 많이 사용하는 버튼을 기반으로 공통화를 진행하도록 하겠습니다.

import styled from "styled-components";

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #bf4f74;
  color: #bf4f74;
  margin: 0 1em;
  padding: 0.25em 1em;
`;

export default function Button({ children, clickHandler }) {
  return <StyledButton onClick={clickHandler}>{children}</StyledButton>;
}

 

다음과 같이 사용하게 되면 레이아웃 + 클릭 기능을 함께 사용하는 버튼 컴포넌트가 만들어집니다.

자 이제 각자의 기준으로 컴포넌트를 만들어서 사용해봅시다!!!

 

아래과 같이 사용하면 다른 props 도 사용가능한 공통 컴포넌트를 만들 수 있어 보이죠?

import React from "react";
import styled from "styled-components";

// styled component 예제 추가 - 불필요한 css 파일 제거
const StyledNavMenu = styled.div`
  right: 0rem;
`;

export default function NavMenu({ children, ...props }) {
  return (
    <StyledNavMenu>
      {children}
    </StyledNavMenu>
  );
}