React Components (1) - Typescript

    애플리케이션에는 수많은 컴포넌트가 존재하고, 이러한 컴포넌트들은 다양한 페이지, 또 다른 컴포넌트 내에서도 활용될 수 있습니다. 다음은 현재 스럽의 디자인 내용입니다.

그림을 보면, 버튼만 하더라도 수많은 케이스가 존재합니다. 버튼의 사이즈부터 배경색상, 글자 색상, 버튼 테두리, 아이콘의 유무, 심지어 같은 사이즈의 버튼 내에서도 서로 다른 디자인을 갖고 있습니다.

 

제일 처음에 나온 Button/Medium의 경우를 잠시 살펴보면, 4가지의 케이스가 존재합니다. 하지만 이렇게 많은 컴포넌트들을 하나하나씩 매번 생성하게 된다면, 코드의 가독성이 떨어지게 되고, 동일한 내용의 코드가 반복되기 때문에 코드의 양이 늘어나는 등 퍼포먼스 측면에서도 다양한 문제점이 존재합니다.

 

    따라서, 모든 React 컴포넌트 설계는 재사용성과 유지보수를 고려해 구조를 만드는 것이 중요하고, 동일한 컴포넌트를 어떻게하면 다른 컴포넌트 내에서 더 쉽게 활용할 수 있는지, 그리고 코드를 작성하는 입장에서 유지보수를 더 효율적으로 할 수 있도록 고민하는 것이 중요합니다.

 

이번 글을 시작으로 현재 SLUV에서 어떤 방식으로 컴포넌트를 설계하고 생성하고 있는지, Typescript와 Styled-componet 이 2가지 측면을 중점으로 설명하고자 합니다. 이번 글에서는 Typescript에 대한 내용을 먼저 설명하고 다음 글에서 Styled-component를 중점으로 다루겠습니다. 

---

Typescript vs Javascript

    스럽은 기존 1차 MVP에서는 Javascript를 사용하여 개발을 진행했습니다. 3개월이라는 짧은 시간 내에 빠르게 애플리케이션 제작을 해야했기 때문에 타입스크립트에 대한 많은 지식이 없는 상태에서 개발을 진행하는 것보다 익숙한 자바스크립트로 개발을 진행하는 것이 효율적이라고 판단했습니다. 하지만, 서비스의 사이즈가 매우 크다보니 앱을 런칭하고 나서도 수많은 오류들이 발견되었습니다. 오류를 수정하면서 느낀점은 변수들의 type이 지정되어있지 않고, 런타임에 타입이 결정되다 보니 타입에 대한 오류들이 발견되었고 이를 통해 2차 MVP는 Typescript로 개발하는 방향을 생각하게 되었습니다. 먼저 Javascript와 Typescript에 대한 내용을 잠깐 짚고 가겠습니다. 

 

1. JavaScript

    JavaScript는 동적 프로그래밍 언어입니다. 즉, 런타임에 데이터 유형을 결정하기 때문에 JavaScript를 배우는 데 있어서 큰 장점입니다 데이터 타입에 대해 유연성 있게 코드를 작성할 수 있습니다. 또한, JavaScript는 모든 웹 브라우저에서 지원되며, 이러한 이유로 JavaScript는 현재 가장 인기 있는 언어 중 하나입니다.

    그러나 JavaScript에는 몇 가지 단점이 있습니다. 첫째, 코드 유지보수가 어렵습니다. JavaScript는 동적 프로그래밍 언어이기 때문에, 런타임에 데이터 유형이 결정됩니다. 이 때문에 코드를 이해하거나 수정하는 것이 어렵다는 단점이 있습니다. 둘째, 에러 처리가 어렵습니다. JavaScript는 에러 처리를 위한 많은 기능을 제공하지 않으며, 에러가 발생하면 프로그램이 죽을 수 있습니다. 셋째, 테스트하기 어렵습니다. JavaScript는 유닛 테스트 및 통합 테스트를 지원하는 데 있어서 약합니다.

 

2. TypeScript

    TypeScript는 Microsoft에서 개발한 자바스크립트의 슈퍼셋입니다. 즉, 자바스크립트의 모든 기능을 포함하면서 타입 시스템을 추가한 언어입니다. TypeScript는 컴파일 시간에 타입을 확인하므로, 더 많은 안정성과 에러 처리를 제공합니다. 또한, TypeScript는 JavaScript 코드를 포함하기 때문에, 이미 있는 JavaScript 코드를 재사용하기에도 좋습니다.

    TypeScript의 주요 장점은 다음과 같습니다. 첫째, 코드 안정성을 높입니다. TypeScript는 정적 타입 시스템을 사용하므로, 컴파일 시간에 타입을 확인하여 더 많은 안정성을 제공합니다. 둘째, 코드 가독성을 높입니다. TypeScript는 타입을 지정하기 때문에, 코드를 이해하기 쉽습니다. 셋째, 개발 생산성을 높입니다. TypeScript는 코드 에러를 미리 잡아주므로 어떤 에러를 범하는지 미리 확인할 수 있기 때문에, 디버깅 시간을 줄일 수 있습니다. 넷째, 팀 프로젝트에서 유용합니다. TypeScript는 코드 베이스가 큰 프로젝트에서 유용하며, 타입 체킹을 통해 팀원들이 더 쉽게 협업할 수 있습니다.

    하지만 TypeScript에는 몇 가지 단점도 있습니다. 첫째, 학습 곡선이 높습니다. JavaScript에 타입을 지정해야하고 타입에 대한 이해도가 필요하기 때문에 러닝 커브가 높아 처음에는 TypeScript를 사용하기 어려울 수 있습니다. 둘째, 컴파일 시간이 길 수 있습니다. TypeScript는 컴파일 시간이 더 길 수 있습니다. 셋째, JavaScript와 비교하여 제한적인 기능을 제공합니다.

 

결론

    JavaScript는 가볍고 빠르며, 모든 브라우저에서 지원되므로, 간단한 프로젝트에서는 아주 유용합니다. 반면에 TypeScript는 코드 안정성을 높이며, 개발 생산성을 높일 수 있습니다. 따라서 대규모 프로젝트나 팀 프로젝트에서는 TypeScript를 사용하는 것이 좋습니다. 이러한 이유로, Sluv의 2차 MVP에서 TypeScript를 채용하고 있으며, 더 효율적이고 안정적인 코드를 기대하고 있습니다. 

 

동적 타입 언어	정적 타입 언어
타입에 대한 고민을 하지 않아도 되므로 배우기 쉽다	변수를 선언할 떄마다 타입을 고민해야 하므로 진입 장벽이 높다.
코드의 야이 적을 때 생산성이 높다	코드의 양이 많을 때 동적 타입 언어에 비해 생산성이 높다
타입 오류가 런타임 시 발견된다	타입 오류가 컴파일시 발견된다

 

---

React Components in Typescript

    그렇다면 Sluv 에서는 어떤식으로 컴포넌트를 생성하는지 알아보겠습니다. 

위에 보여드린 ButtonMedium을 가지고 설명하겠습니다. 

Button Medium은 먼저 아이콘의 유무에 따라 2가지로 나뉩니다. 

1. 아이콘이 없는 버튼

2. 아이콘이 존재하는 버튼

 

그리고 상태에 따라서 또 2가지로 나뉩니다.

1. 클릭 전 상태

2. 클릭 후 상태

 

마지막으로 disable 상태 총 5가지로 나뉩니다.

해당 그림은 아이템을 업로드 시 셀럽을 선택하는 화면입니다.

이 화면에서는 버튼 안으로 셀럽 각각의 이름이 들어가고, 각각의 버튼이 클릭될 때마다 선택 여부에 대한 Click Event가 발생하게 됩니다. 검색 버튼을 누르게 되면 셀럽을 검색할 수 있는 모달이 뜨는 등 각 버튼마다 제 역할이 다 다릅니다. 

 

import React, { useState, useEffect } from 'react'
import { MediumWrapper } from './styles'
import { ReactComponent as Search } from '../../assets/search_18.svg'
import { Common } from '../styles'

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

const ButtonMedium = ({ text, icon, type, active, onClick }: ButtonMediumProps) => {
  const [color, setColor] = useState('')
  useEffect(() => {
    if (type == 'sec') {
      setColor(Common.colors.BK)
    } else {
      setColor(Common.colors.GR500)
    }
  }, [])

  return (
    <MediumWrapper icon={icon} type={type} active={active} onClick={onClick}>
      {icon && (
        <div>
          {active ? (
            <Search width='18' height='18' fill={Common.colors.SEC} />
          ) : (
            <Search width='18' height='18' fill={color} />
          )}
        </div>
      )}
      <p>{text}</p>
    </MediumWrapper>
  )
}

export default ButtonMedium

위 코드에서는 ButtonMediumProps 인터페이스를 정의하고, 이를 통해 text , icon의 여부, type, active 여부, onClick 함수,를 props로 정의합니다.

하지만 이런식으로 props의 타입을 명시하지 않은 경우에는 any타입으로 간주하게 됩니다. 이럴 경우 에러 발생률이 올라가고 type이 올바르지 않아 에러를 발생시키게 됩니다. 즉 Button Medium의 매개변수에 대한 type을 지정해주는 interface를 구성해 이를 지정해주는 것으로 코드가 안정적으로 구현되게 됩니다. 또한 해당 props에 대한 타입을 다른 개발자 또한 잘 알아볼 수 있기 때문에 가독성에도 도움이 됩니다.

 

이렇게 다양한 디자인을 각각 만들지 않고 하나의 컴포넌트로 만들어 사용함으로써 재사용성을 높이고, 효율성을 높일 수 있었고, Typescript 를 통해 코드의 가독성과 유지보수성을 높일 수 있었습니다. 

---

결론 

React 컴포넌트를 작성할 때 TypeScript를 사용하는 것이 좋은 이유는 다음과 같습니다.

1. 코드의 안정성을 높입니다.
    TypeScript를 사용하면, 개발자가 컴파일 시간에 타입 에러를 발견할 수 있습니다. 이는 코드의 안정성을 높이고, 개발자가 실수로 발생하는 버그를 줄일 수 있습니다.

2. 코드의 가독성을 높입니다.
    TypeScript는 코드의 가독성을 높이는 데 도움이 됩니다. 코드에서 사용되는 모든 객체, 함수, 변수 등의 타입을 정의할 수 있기 때문입니다. 이를 통해 코드의 구조를 더 명확하게 파악할 수 있으며, 코드의 가독성을 높일 수 있습니다.

3. 코드의 유지보수성을 높입니다.
    TypeScript를 사용하면, 개발자가 컴파일 시간에 타입 에러를 발견할 수 있습니다. 이는 코드의 유지보수성을 높이는 데 도움이 됩니다. 또한, TypeScript를 사용하면 코드의 구조를 더 명확하게 파악할 수 있으므로, 코드의 유지보수성을 높일 수 있습니다.

4. 재사용성을 높입니다.
    React 컴포넌트를 작성할 때, TypeScript를 사용하면 재사용성을 높일 수 있습니다. TypeScript는 코드를 더 명확하게 정의하므로, 다른 컴포넌트에서 해당 컴포넌트를 사용할 때 더 쉽게 이해할 수 있습니다. 또한, TypeScript를 사용하면 컴포넌트 간의 의존성을 더 명확하게 파악할 수 있으므로, 재사용성을 높일 수 있습니다.

5. 개발 생산성을 높입니다.
    TypeScript는 개발자가 코드를 작성할 때 미리 타입을 정의할 수 있으므로, 개발자가 코드를 작성하는 데 필요한 정보를 더 쉽게 파악할 수 있습니다. 이는 개발 생산성을 높이는 데 도움이 됩니다.

6. 팀 내의 코드 일관성을 유지합니다.
    TypeScript는 코드의 일관성을 유지하는 데 도움이 됩니다. 모든 개발자가 코드에서 사용되는 객체, 함수, 변수 등의 타입을 정의하므로, 코드의 일관성을 유지할 수 있습니다.

컴포넌트는 React 애플리케이션에서 가장 중요한 요소 중 하나입니다. 따라서 컴포넌트를 작성할 때 타입스크립트를 사용하면, 코드의 안정성, 가독성, 유지보수성, 재사용성, 개발 생산성, 코드 일관성 등을 높일 수 있습니다. 따라서 스럽의 2차 MVP에서 Typescript를 사용하여 보다 안정적이고 효율적으로 작성할 수 있도록 도와줄 수 있다고 생각합니다.