[Typescript] Props가 여러 개일 때 타입스크립트 적용하기

프로젝트에 타입스크립트를 적용하기로 해서 타입스크립트 이론을 공부했다. 공부를 한 뒤 프로젝트에 적용하고 있는데 쉽지 않다. 다른 사람이 만든 타입스크립트 프로젝트를 보고 참고하려고 해도 나와 넘기려는 데이터 형태 또는 파일 구조가 달라서 참고할만한 예제 찾는 것도 어렵다. 이론 공부만으로는 정말 많이 부족하고 실전을 경험하면서 모르는 부분을 찾으면서 공부를 하는 게 개발 공부에서의 왕도라는 걸 새삼 또 깨닫는당! 

개요

타입스크립트를 적용할 곳은 로그인 부분이다.

LoginPresenter.tsx -> LoginContainer.tsx -> InputForm.tsx 방향으로 data와 socialLoginImg 를 props로 넘기고 있다.

참고로 loginInputForm 파일명을 회원가입과 로그인 부분에 공통적으로 사용할 것을 고려해 나중에 AuthInputForm으로 바꿔서 내용에 이름이 섞여있다^^;

 

export const LOGIN_DATA = [
  {
    id: 1,
    title: '이메일',
    type: 'text',
    name: 'email',
    button: false,
  },
	...
];

export const SOCIAL_IMG = [
  {
    id: 1,
    style: 'w-16 h-12 mx cursor-pointer',
    name: 'google_icon.png',
    alt: 'google_icon',
  },
  ...
];

 

데이터 타입은 interface로 지정해주었고, 따로 AuthInputFormInterfaces.ts 파일을 만들어 관리할 수 있도록 했다. type alias과 interface 둘다 객체의 타입을 지정해줄 수 있는데 interface를 사용한 이유는, interface는 확장이 가능한 반면 type alias 는 불가능하기 때문이다. 

 

export interface AuthInputFormItem {
  id: number;
  title: string;
  type: string;
  name: string;
  button: boolean;
  validate?: string;
  errorMsg?: string;
}

export interface SocialLoginImg {
  id: number;
  style: string;
  name: string;
  alt: string;
}

 

LoginPresenter.tsx 파일

Props로 여러 데이터가 넘어올 때 타입 지정

1. 나의 실수

자 이제 LoginContainer.tsx에서 props로 data와 socialLoginImg를 받아야 한다. 어떻게 코드를 작성해야 할까? 처음에 나는 interface 설정과 타입 지정을 이렇게 했다.

 

export interface LoginInputItem {
  id: number;
  title: string;
  type: string;
  name: string;
  button: boolean;
  validate?: string;
  errorMsg?: string;
}

export interface LoginInputProps {
  data: loginInputItem[];
}

잘못된 코드

 

말도 안되는 코드를 작성했던 이유는 타입 설정을 할 때 data : 타입 이렇게 표현하니까 props로 넘어온 데이터에 각각 타입을 지정해주고 싶어서였다. 당연히 화면에는 아무것도 나오지 않았고 생각해보니 props는 객체이고 저 둘이 props = { data : { blah blah .. } , socialLoginImg : {blah blah}} 형태로 담겨있으니 저렇게 입력하는 건 정말 엉뚱한 일이란 걸 깨달았다. 그리고 구조분해할당으로 data와 socialLoginImg를 분리시키되 이 둘에 대한 타입 지정은 한 번에 해줘야겠단 결론을 내렸다. 

2. 수정한 코드

다른 사람들이 어떻게 타입을 지정했을까 찾다가 여러 개의 props에 타입 별칭을 적용한 것을 보았다. 타입 별칭 대신 interface를 사용해도 된다. 나는 interface로 타입을 지정하고, 그다음에 interface를 모아둔 파일에 모아둘까 하다가 props로 넘어오는 것들은 컴포넌트에 데이터 형태가 어떤건지 보게 냅두는 것도 괜찮아 보여서 interface가 아닌 type으로 지정해놨다. interface로 하면 통일성을 위치를 옮겨야 될 것 같아서였다. 그리고 interface로 배열 형태까지 지정해주었었는데 그 부분까지는 지정을 안하는 게 코드가 더 깔끔하다 판단되어 LoginInputProps는 삭제하고 type에 바로 배열 형태를 지정해주었다.

 

이 의견은 타입스크립트 걸음마를 뗀 내 의견이기 때문에 나중에 이 부분이 적합하지 않다 판단되면 다시 또 코드를 수정할 수 있다.

 

type LoginContainerProps = {
  data: AuthInputFormItem[];
  socialLoginImg: SocialLoginImg[];
};

const LoginContainer = ({
  data,
  socialLoginImg,
}: LoginContainerProps): JSX.Element => {

  return (...) }

 

 

처음 타입스크립트를 적용했을 때 갑자기 뜨는 빨간 줄들과 여러 에러를 보고 '아 이거 바로 잡을 수 있나ㅠㅠ'하고 당황했던 게 생각난다. 이제 VS code에 빨간 줄도 없고 화면이 정상적으로 출력되어서 정말 정말 기분이 좋다. 기능 구현하면서 타입스크립트를 적용하면 실력이 팍팍 늘 것이당!! 다시 또 힘내보자 화이팅~~