React Components (2) - styled-components

앞선 글에서는 React 컴포넌트의 생성에 있어 Typescript의 중요성과 이의 장점에 대해 정리했습니다.

이번 글에서는 Styled-components 와 Typescript를 활용하여 컴포넌트의 재사용성을 높이는 방법을 알아보겠습니다. 

---

Styled Component 란?

우선 Styled Coponent에 대해 설명하는 걸로 시작하겠습니다.

styled-components

Styled Component는 React에서 스타일을 작성하는 방식 중 하나입니다. 기존에는 CSS 파일을 만들어 링크를 걸거나, 인라인 스타일링을 했지만, 이제는 스타일과 컴포넌트를 하나로 묶어 작성할 수 있습니다. 또한, 기존의 CSS 작성 방식과는 다르게 JavaScript 코드 안에 CSS를 작성하기 때문에 컴포넌트 스타일링에 더욱 집중할 수 있습니다. 

Styled Component는 컴포넌트를 만들 때, 해당 컴포넌트와 함께 스타일을 작성합니다. 이렇게 함으로써 컴포넌트의 스타일을 독립적으로 관리할 수 있습니다. 또한, CSS가 적용되는 우선순위를 고민할 필요도 없습니다.

Styled Component 사용 방법

Styled Component를 사용하기 위해서는 `styled-components` 패키지를 먼저 설치해야 합니다.

npm install styled-components

Styled Component를 사용하기 위해서는 다음과 같은 방식으로 코드를 작성합니다.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  font-size: 1rem;
`;

위 코드에서는 `styled-components` 패키지를 import한 후, `styled.button` 메서드를 이용하여 Button 컴포넌트를 생성합니다. 이때, backtick(`)을 사용하여 CSS 코드를 작성할 수 있습니다.

 

Styled-components는 HTML의 기본적인 div, p, span, input, button, textarea등의 element를 다 정의할 수 있습니다. 따라서 styled.을 작성하고 스타일하고 싶은 element를 적은 후, 백틱을 사용해 안에다가 스타일링을 진행하면 됩니다.

 

Styled Component의 장점

    Styled Component의 장점 중 하나는 CSS와 관련된 모든 것이 한 곳에서 관리된다는 것입니다. 또한, 기존의 CSS와 달리 컴포넌트 단위로 스타일을 관리하기 때문에 컴포넌트 간 스타일 충돌을 방지할 수 있습니다.

 

    Styled Component는 props를 활용하여 스타일을 동적으로 변경할 수 있습니다. 예를 들어, 버튼 컴포넌트에서 `type` prop에 따라 다른 색상의 배경색을 지정하거나, `active` prop에 따라 클릭 여부에 따른 스타일을 변경할 수 있습니다. 이를 통해 컴포넌트의 재사용성을 높이고, 코드의 중복을 줄일 수 있습니다.

    Styled Component는 CSS-in-JS 방식으로 동작하기 때문에 CSS 모듈화나 CSS 전처리기를 사용하지 않아도 됩니다. 이를 통해 CSS 관련 설정에 대한 별도의 설정 파일을 관리할 필요가 없어져서 프로젝트의 구성을 간단하게 만들어줍니다.

    Styled Component는 타입스크립트와도 함께 사용할 수 있습니다. 타입스크립트를 사용하면 프로젝트의 안정성과 가독성을 높일 수 있습니다. 예를 들어, Styled Component에서 props를 전달할 때 props의 타입을 정확히 지정해주면, 해당 컴포넌트를 사용하는 다른 개발자들이 해당 컴포넌트의 props의 의미와 사용법을 더욱 쉽게 이해할 수 있습니다.

    모든 이유들을 종합해보면, Styled Component는 React 개발을 보다 쉽고 효율적으로 만들어주는 강력한 도구라고 생각합니다.

---

Styled Component를 통한 컴포넌트의 재사용성

그렇다면 스럽에서는 어떤식으로 Styled Component를 사용해 재사용성을 높이고 있는지 알려드리겠습니다. 

다시한번 Button Medium 컴포넌트를 통해 설명하겠습니다.

 

Button Medium 컴포넌트의 경우 생김새는 같지만 색상, text, 아이콘이 모두 다른 점이 특징입니다.

그렇다고 이 4가지의 버튼을 모두 만들게되면 이보다 더 비효율적일 수 없습니다. 코드의 양도 늘어날 뿐만 아니라, 어떤게 어떤 버튼인지 구별도 안됩니다.

 

따라서 스럽에서는 이러한 비효율과 혼란을 방지하기 위해 styled component와 typescript를 통해 문제를 해결하고자 합니다. 

interface ButtonMediumProps {
  text: string
  icon?: boolean
  type: string
  //  type 상태는 pri, sec, disable 로 디자인 구분
  active?: boolean
  // active 는 클릭 여부
  onClick: () => void
}

Button Medium은 text, icon, type, active, onClick의 5가지 props를 받습니다.

1. text는 버튼 내부에 들어갈 버튼 명 (string)

2. icon은 좌측에 있는 돋보기 아이콘의 존재여부 (boolean)

3. type은 버튼 디자인을 결정하는 props (string) pri, sec, disable 로 3가지의 type이 있습니다

4. active는 버튼의 활성화 여부 (boolean)

5. onClick은 해당 버튼이 클릭되었을 때 작동할 함수 (void function)

코드를 보시게 되면 icon이 true 일 경우 돋보기 아이콘이 추가가 되며 false일 경우에는 단순 text만 들어가게 됩니다.

또한 active가 true일 경우 아이콘의 색상이 변화된다는 점도 알 수 있습니다.

 

그렇다면 styled component에서 MediumWrapper는 어떤식으로 type과 active를 통해 스타일을 바꾸는지 알려드리겠습니다.

import styled from 'styled-components'
import { Common } from '../styles'

export const MediumWrapper = styled.div<{
  icon?: boolean
  type: string
  active?: boolean
}>`
  color: ${({ type }) =>
    (type === 'pri' && `${Common.colors.GR600}`) ||
    (type === 'sec' && `${Common.colors.BK}`) ||
    (type === 'disable' && `${Common.colors.GR500}`)};

  background-color: ${({ type }) =>
    (type === 'pri' && 'white') ||
    (type === 'sec' && 'white') ||
    (type === 'disable' && `${Common.colors.GR100}`)};

  border: ${({ type }) =>
    (type === 'pri' && `0.0625rem solid ${Common.colors.GR200}`) ||
    (type === 'sec' && `0.0625rem solid ${Common.colors.BK}`) ||
    (type === 'disable' && `0.0625rem solid ${Common.colors.GR200}`)};

  ${({ active }) =>
    active &&
    `
      background-color: ${Common.colors.BG};
      color:${Common.colors.SEC};
    `}
// 설명을 위해 나머지 코드 주석처리
`

 MediumWrapper의 props를 통해 변화되는 부분만 보여드리겠습니다. 

 

Type 에 따라서 변화되는 부분은 color, background-color, border 이렇게 3 부분입니다. 

type 이 pri 일 경우, sec 일 경우, disable 일 경우 이 세가지 조건을 type에 따라 결정하게 되어 같은 컴포넌트를 3개로 나누지 않고 하나로 처리하였습니다.

 

Active 에 따라서 변화되는 부분은 background-color, color 이렇게 2 부분입니다.

Active가 true일 경우에는 Common.colors.BG와 Common.colors.SEC으로 변화하고

false인 경우에는 기존에 type에 따라 생성된 background-color와 color로 유지하게 됩니다. 

 

export const MediumWrapper = styled.div<{
  icon?: boolean
  type: string
  active?: boolean
}>`

또한, 해당 styled component를 export해 다른 컴포넌트에서도 사용할 수 있습니다. 

 

해당 MediumWrapper를 다른 컴포넌트에서 import 해서 동일한 스타일링을 적용할 수 있기 때문에, 더욱더 재사용성이 증가합니다.

 

---

결론

    이번 글에서는 React에서 Styled Components와 Typescript를 활용하여 컴포넌트의 재사용성을 높이는 방법에 대해 알아보았습니다. Styled Components와 타입스크립트를 함께 사용함으로써 프로젝트의 안정성과 가독성을 높일 수 있습니다. 또한, props를 활용하여 스타일을 동적으로 변경할 수 있어 컴포넌트의 재사용성을 높이고, 코드의 중복을 줄일 수 있습니다. 

 

    이와 같이 Styled Components를 사용하면 컴포넌트의 스타일을 다양하게 지정하여, 프로젝트에서 재사용성이 높은 컴포넌트를 만들 수 있어 유연성이 높아집니다. 이는 디자인의 변화나 확장성에 대응하는 데 유용하며, 디자인 변경에 따른 코드의 수정이나 추가를 최소화하여 개발 생산성을 높일 수 있기 때문에 매우 효율적이라고 생각합니다. 

 

    따라서 이러한 장점들을 통해 Styled Components와 Typescript를 활용하여 앞으로 보다 유지보수성이 높은 스럽을 개발하는 것을 목표로 달려가겠습니다♥