[ETC] : 공통컴포넌트? 아?

 

이번 프로젝트는 가장 작은 아톰형식의 컴포넌트부터 시작한다. 그래서 각 같은 공통컴포넌트를 먼저 하나 만들어보고 리뷰하기로 했다.

오늘까지 작업은 했고 내일 같이 모여서 리뷰를 하기로 했다.

우리 프로젝트에서 아주 많이 사용되는 Input을 먼저 만들기로 했는데, InputBasic이라고 정했다.

단순 텍스트뿐 아니라 , 숫자, 음수, 소수점, 계좌번호, 온도, 전화번호 등.. 다양한 형태의 텍스트를 입력받고 컨트롤해야 한다.

그리고 인풋 내부 라벨(단위 표기), 검색창의 돋보기 등 다양한 형태도 가지고 있어서 어떻게 처리할지 고민을 많이 했다.

일단 CSS 관련된 부분은 퍼블리싱이 나오면 적용한다고 생각하고 각각의 위치를 먼저 잡았다. 

Prop로는 간단하게 value, setValue, className, kind, disabled, maxLength... 여러 Props로 구성되었고,

여기서 중요한 건 kind속성이다. 이것에 따라 입력이 가능한 범위나, format이 달라지게 만들었다.

 

사실 오늘 말하고 싶은 부분은 아랫부분이다.

⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️

 

📌 이번에 만들면서 중요하게 생각한 건 제작은 혼자 했기 때문에 다른 사람이 사용할 때 어렵지 않게 구현해야 했다...

 

그래서 생각한 건 kind와 같은 props에 직접 Type을 설정해서 어떤 종류가 있는지 작성하려고 할 때 보일 수 있게 했다.

 

"Type Alias"는 TypeScript에서 사용하는 기능으로, 새로운 타입을 정의할 때 사용한다.  원하는 형태의 타입을 간단하게 만들 수 있으며, 기존의 타입들을 조합해서 더 복잡한 타입을 만들 수도 있다.  (아래 코드 참고)

 

export type InputKind =
  | 'normal'
  | 'number'
  | 'day'
  | 'minute'
  | 'accout'
  | 'decimal'
  | 'minusDecimal'
  | 'phone'
  | 'emailId'
  | 'emailDomain';

 

type InputKind에서 지정한 타입만 목록형식으로 확인가능

이런 식으로 작성하면 이후 Props Interface 설정 시 kind에 InputKind를 지정하면 이후에 InputBasic에 kind에 값을 입력할 때 목록을 나와서 보기 편하고, 지정된 값 이외에는 에러를 표기해서 잘못된 사용을 막을 수 있게 했다.

 

그리고 InputBasic에서 사용되는 Props 설명 아래 코드처럼 작성하면 이후 컴포넌트를 import 하고 마우스를 올리면 해당 컴포넌트에 필요한 Props에 대한 설명이 나와서 편하게 사용할 수 있다. 간단한 작성이지만 처음 컴포넌트를 다루는 사람에게는 큰 도움이 될 것 같다.

 

(이전부터 알고 있었지만 왜 하지 않았는가... 🤦🏻‍♂️)

 

"JSDoc" 주석을 사용하면 해당 코드의 사용방법과 의도를 파악할 수 있어 개발시간을 단축할 수 있다. (아래 코드 참고)

/**
 * @param {string} value  - value
 * @param {React.Dispatch<React.SetStateAction<string>>} setValue - setValue
 * @param {string} kind - input에 입력 받을 수 있는 value 종류 (InputKind)
 * @param {string} className - className 추가
 * @param {boolean} search - 검색아이콘 유무
 * @param {string} placeholder -placeHoder 문구 추가
 * @param {string} leftLabel - 좌측안내 문구 추가
 * @param {string} rigthLabel - 우측안내(단위) 문구추가
 * @param  {boolean} disabled - disabled 여부
 * @param {boolean} readOnly - readOnly 여부
 * @param {number} maxLength - 길이제한 (한글은 제한 * 2 값으로 입력)
 * @param {funtion} onPressEnter - Enter key 입력시 발생하는 이벤트추가
 * @returns void
 */

 

컴포넌트에 마우스를 올리면 작성한 파라미터에 대한 설명이 나옴

 

이전에는 다른 사람이 만든 함수나 컴포넌트를 사용할 때 아무 설명이나 주석이 없어서 하나하나 분석하는데 시간이 너무 많이 소요돼서 개발업무에 지연을 일으켰다....😥 

 

같이 일하는 직장동료(블로그를 같이 쓰기로 한 ㅋㅋ ) 에게 오늘 보여줬더니 굉장히 좋은 것 같다고 해서 매우 기분이 좋았고, 시니어 분에게도 개발된 컴포넌트를 보여드리면서  오늘 작성한 type이나 이런 param에 대한 설명을 적은 것을 보여드리니 매우 좋아하셨고 도움이 될 것 같다고 해주셔서 만족했다. 

 

다시 하나씩 시작하니깐 내가 개발하더라도 다른 사람도 편하게 사용할 수 있는 공통 컴포넌트를 만들고 싶다!