금번 멘토링 목표

성공적인 멘토링을 위해 멘토링 목표를 작성해주세요.

프로젝트 진행 상황

전반적인 프로젝트 진행을 알기 위해 대략적인 설명을 작성해 주세요.

질문 사항

Q. svg 아이콘을 모아두기 위해 하나의 파일에서 여러 컴포넌트를 만들어 사용하는 것은 어떤가요?

interface colorProps {
  bgColor?: string
  fontColor?: string
}

export const Play = ({
  bgColor = 'white',
  fontColor = 'black'
}: colorProps) => (
  <svg
    width='30'
    height='30'
    viewBox='0 0 30 30'
    fill='none'
    xmlns='<http://www.w3.org/2000/svg>'
  >
    <rect width='30' height='30' rx='15' fill={bgColor} />
    <path
      d='M14.9998 19.8333C14.7237 19.8333 14.4998 20.0572 14.4998 20.3333C14.4998 20.6095 14.7237 20.8333 14.9998 20.8333V19.8333ZM20.6665 20.8333C20.9426 20.8333 21.1665 20.6095 21.1665 20.3333C21.1665 20.0572 20.9426 19.8333 20.6665 19.8333V20.8333ZM9.6665 20.3333H9.1665C9.1665 20.6095 9.39036 20.8333 9.6665 20.8333V20.3333ZM9.6665 17.6667L9.31295 17.3131C9.21918 17.4069 9.1665 17.5341 9.1665 17.6667H9.6665ZM18.3332 9L18.6867 8.64645C18.4915 8.45118 18.1749 8.45118 17.9796 8.64645L18.3332 9ZM20.9998 11.6667L21.3534 12.0202C21.5487 11.825 21.5487 11.5084 21.3534 11.3131L20.9998 11.6667ZM12.3332 20.3333V20.8333C12.4658 20.8333 12.593 20.7807 12.6867 20.6869L12.3332 20.3333ZM14.9998 20.8333H20.6665V19.8333H14.9998V20.8333ZM10.1665 20.3333V17.6667H9.1665V20.3333H10.1665ZM17.9796 9.35355L20.6463 12.0202L21.3534 11.3131L18.6867 8.64645L17.9796 9.35355ZM12.3332 19.8333H9.6665V20.8333H12.3332V19.8333ZM20.6463 11.3131L18.6463 13.3131L19.3534 14.0202L21.3534 12.0202L20.6463 11.3131ZM18.6463 13.3131L11.9796 19.9798L12.6867 20.6869L19.3534 14.0202L18.6463 13.3131ZM10.0201 18.0202L16.6867 11.3536L15.9796 10.6464L9.31295 17.3131L10.0201 18.0202ZM16.6867 11.3536L18.6867 9.35355L17.9796 8.64645L15.9796 10.6464L16.6867 11.3536ZM19.3534 13.3131L16.6867 10.6464L15.9796 11.3536L18.6463 14.0202L19.3534 13.3131Z'
      fill={fontColor}
    />
  </svg>
)

A. 이런 파일의 경우, 파일 하나의 크기가 커져도 상관이 없다. 지금 쓰고 있는 방법 괜찮다

다만 로직이 들어가는 코드의 경우에는 반드시 여러파일로 나누어 모듈로 사용하는 것이 좋다!

Q. 아주 작은 단위의 컴포넌트를 해당 페이지에 만드는 것 vs 컴포넌트 파일로 만드는 것