[React + TypeScript] reac-icon 의 Type을 활용해서 Props 로 내려주는 방법

    주제 : 

React-Icon을 사용하다가 동일한 컴포넌트 형태인데 상위 컴포넌트에서  하위로 icon 을 내려줄 수 없는지가 궁금해졌다. 

 

 

 

원래 React-icon 사용법은  아래처럼 마음에 드는 아이콘을 찾아서 위에서 선언하고 그대로 부러와서 사용하면 된다. 

 

:: React-Icon

import { LiaLockSolid } from 'react-icons/lia'; 

//생략

<div>
	<LiaLockSolid/>
</div>

//생략

 

 

하지만 지금 메인 프로젝트 리팩토링 하다가 동일한 형식의 디자인에서 결국은 같은 Input 폼인데 들어가는 type 과 아이콘만 다를 이 컴포넌트들의 재사용성을 높이고 싶었다. ( 사실 일일히 다시 디자인하고 사용하기 귀찮았..던.. 크흠)

 

그래서 기존에 아래와 같았던 폴더 구조에서 

login
    - login.tsx
    - login.styled.tsx

signup
    - Signup.tsx
    - Siognup.styled.tsx

 

 

다음과 같이 재사용 components 폴더에 Input 컴포넌트들을 관리할 수 있도록 새롭게 폴더를 생성하였다. 

src/components/
   -input
         - Input.tsx
         - Input.styled.tsx

 

 

    접근 방식 : 

 

1. 상위 컴포넌트 Signup 파일에서는 기존의 계획대로 원하는 icon을 선언 후 Props 로 내려준다. 

import { LiaLockSolid } from 'reac-icons/lia';
import { TopRoundInput } from '@/components/Input/Input";

export default const Signup = () => {
  return(
    //생략 ..
    
       <TopRoundInput icon = {LiaLockSolid} type={"email"} placeholder={"아이디"}/>
       
    //생략 ..
  )
}

 

 

 

 

 

2. Input 종류들을 관리하는 하위 " Input "컴포넌트에서는 받은 icon 과 type, placeholder props를 받을 준비를 한다. 

interface InputFormType {
  icon?: IconType;
  type?: string;
  placeholder?: string;
}

export const TopRoundInput = ( {icon: Icon, type, placeholdeer}: InputFormType ) => (
  <TopLoginInput>
    <InputIcon>
      { Icon && <Icon/> }
    </InputIcon>
    <LoginInput type={type} placeholder={placeholder}/>
  </TopLoginInput>
)

TIP: react-icon 에서 받은 icon 들의 Type 은 " IconType" 입니다. 

 

 

 

icon: Icon 값이 존재한다면 = Props 로 내려받았다면, 해당 부분은 받은 Icon 을 소환한다는 의미이다. 

 

처음에는 무작정 ( icon: IconType ) 으로 받아서 { icon && <{icon}/> } 이런 뭔가 이상한 형식으로 작성하려 했었다. 

   - 당연히 에러의 향현 

 

 

TIP: 왜 icon: Icon 으로 바꿔서 받는ㄴ가?!

  - 나도 지금 부터 알아봐야 한다. 

 

 

암튼 이렇게 하니까 아주 원하는대로 각각의 Props 내려준 대로 아이콘들과 input 폼이 생성되었다. 

 

 

 

 

 

    고민 거리 : 

더 다양한 type 의 input 태그 형태를 관리하기 위해서 어떻게 코드를 작성해야 할지 고민이다. 

 

회원가입 파트에서 아이디와 비밀번호 뿐만이 아니라, 선택지, 이름, 생년월일, 번호 이렇게 다양한 input의 type이 필요하다. 다른거야 어떻게든 하드코딩 방식으로 빠르게 만들 수 있지만 선택지를 넣는 곳은 따로 wrapper 를 만들어야 할지.. 만들어둔 input 컴포넌트를 이용해서 할 수 있는지 고민이다.  

 

 

 

 

어렴풋이 생각하기로는 input의 type을 넣는 것 처럼 컴포넌트 자체의 type을 지정해서 1번 타입은 1번 형태, 2번 타입은 2번 형태 이렇게 코드를 관리해야 할 것 같은데... 저번에 멘토님께서 알려주신 여러 타입별로 디자인을 관리하는 코드 형태에 대해서 조금더 고민한 후 코드를 수정해야겠다. 

 

보통 이런 경우는 if문 조건으로 각각 return () 형태로 만들었는데,. 이건 그저 하드 코딩에 불과한 것 같아서.. 좀더 고민해봐야겠다. 

 

 

 

지금 만들어두면 다름 팀원이 마이 페이지 부분을 작성할 때 내 컴포넌트를 사용할 수 있을 것 같아 고심해서 만들어야 겠다는 의무감이 있다. ㅜㅜ