땡스클립 프로젝트 - 개인 개발 회고 (1) 버튼 공통 컴포넌트 제작

버튼 공통 컴포넌트 제작

관련 PR

• https://github.com/GDSC-CAU/Frontend-final-project/pull/5

기능

• 이전버튼과 다음버튼 총 두 개의 공통 컴포넌트 존재
• 이전버튼
  • hericon 이모지를 활용해 이모지 삽입
  • tailwindCSS 적용
  • onClick 속성을 통해 이전 url 연결 (useNavigate(-1)보다 더 정확히 기능함)

    const PrevButton = ({ step }) => {
        const prev = step === 1 ? "/" : `/step/${step - 1}`
    
        return (
            <Link href={prev}>
                <button type="button">
                    <ChevronLeftIcon className="h-10 w-10 -ml-3" />
                </button>
            </Link>
        )
    }

• 다음버튼
  • props로 size, color, disabled를 받아옴
  • tailwindCSS 적용
  • 조건부 스타일 렌더링 진행

Keep

프로젝트 완료 후에도 간직하고 싶은 잘했던 것 / 좋았던 것

ex) "~기술 적용을 했더니 효율적으로 ~를 할 수 있었다.”

• hericon을 쓰니까 별도로 svg파일을 불러오지 않고도 아이콘을 쉽게 사용할 수 있었고, css 또한 쉽게 적용시킬 수 있어서 편했다.
• tailwindCSS를 쓰니 가독성이 훨씬 좋아졌다.

Problem

프로젝트 중 겪었던 어려움

ex) "~기능 적용 중 ~이슈가 발생하였다.”

• 큰 어려움은 없었지만, 조건부 스타일 렌더링을 어떻게 해야 효율적으로 작성할 수 있는 지 감이 잘 오지 않았다.
• 처음 짠 코드

   const NextButton = ({ isDisable, text, onClick, color, size }) => {
       const commonCss = "px-7 py-3 text-lg border-solid border-2 rounded-full"
       const sizeType = size === "half" ? "w-1/2" : "w-full"
       const colorType = {
           red: "bg-red-400 text-white border-red-400",
           white: "bg-white text-gray-800 border-gray-800",
           gray: "bg-gray-300 text-white border-gray-300",
           disabled: "bg-gray-300 text-gray-600 border-gray-300",
       }
   
       return (
           <button
               disabled={isDisable}
               className={
                   isDisable
                       ? `${commonCss} ${colorType.disabled} ${sizeType}`
                       : `${commonCss} ${colorType[color]} ${sizeType}`
               }
               onClick={onClick}
           >
               {text}
           </button>
       )
   }
   
   NextButton.defaultProps = {
       color: "red",
   }
   export { NextButton }

Try

Problem 중 해결된 사항에 대한 해결 방법 / 해결되지 않은 사항에 대한 피드백

ex) "~기능 적용 중 발생한 ~이슈 해결을 위해 ~를 하였다.”

• children으로 빼기
  • 버튼 내에 들어가는 텍스트들을 React Node로 변경했다. 이렇게 변경하게 되면 텍스트 혹은 icon까지 모두 렌더링할 수 있는 이점이 생긴다
    • 원래는,

      <Button text="여기 텍스트" />

    • 지금은,

      <Button>아이콘도 넣을 수 있어요!<SomeIcon /></Button>

• props에 jsdoc 타입 추가
  • 내가 디자인한 color 및 size는 모두 속성값을 기억하고 있어야한다. 그런데 현재 prop을 전달할 때는 자동완성이 지원되지 않아서 종종 Button 파일에 직접 들어가야하는 비용이 발생한다. 그래서 jsdoc으로 타입을 추가하였다 (자바스크립트에 타입을 추가하는 주석처리 방법임)
• 상수는 컴포넌트 외부로 추출
  • 조건부 스타일 렌더링을 위해 props값에 따라 각각 다른 상수 값을 불러들여서 스타일을 변경할 수 있도록 했다. 하지만 상수의 경우 컴포넌트가 재 렌더링될때마다 모두 다시 선언하고 할당될 필요가 없다. 오히려 불필요한 비용이 발생되기 때문에 고정 값은 컴포넌트 외부로 빼주는게 좋다
• 정말 필요한 경우에만 스타일이 조금 변경될 수 있도록 buttonStyle 상수를 제작해서 필요할 때만 조금씩 스타일을 변경할 수 있도록 수정했다
  • 원래는,

    <button
        disabled
        className={
           isDisable? `${commonCss} ${colorType.disabled} ${sizeType}`
                        : `${commonCss} ${colorType[color]} ${sizeType}`
        }
        onClick={onClick}>
        {children}
    </button>

  • 지금은,

    const buttonStyle = `${button} ${disabled ? buttonDisabled : ""} ${
           buttonColor[color]
       } ${buttonSize}`
    <button disabled={disabled} className={buttonStyle} onClick={onClick}>
       {children}
    </button>
        ```