[Typescript] 'socialLoginImg'는 'undefined'일 수 있습니다.

로그인과 회원가입 화면을 구현할 때 공통 컴포넌트인 AuthInputForm.tsx를 활용했다. LoginData와 SignUpData에 따라 다른 레이아웃을 구현할 수 있도록 부모->AuthInputForm에 data를 넘겨주고 있다. 

 

상황

로그인 컴포넌트에서는 AuthInputForm으로 LOGIN_DATA와 소셜 로그인 아이콘이 담긴 SOCIAL_IMG 배열 두 개를 넘긴다.

회원가입 컴포넌트에서는 SIGN_UP_DATA만 넘긴다.

그래서 AuthContainerProps의 인터페이스에서 socialLoginImg를 ? 로 선택적 프로퍼티가 되도록 설정했다.

export interface AuthFormInputItem {
  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;
}

export interface AuthInputFormProps {
  isLoginPage: boolean;
  data: AuthFormInputItem[];
}

export interface AuthContainerProps {
  data: AuthFormInputItem[];
  socialLoginImg?: SocialLoginImg[];
}

그랬더니 LoginContainer.tsx에서 문제가 생겼다. socialLoginImg[] 가 undefined일 수 있다고 에러 메세지가 뜬 것이다.

export interface AuthContainerProps {
  data: AuthFormInputItem[];
  socialLoginImg: SocialLoginImg[] | undefined;
}

그래서 문제 이미지에 보이는 것처럼 socialLoginImg에 undefined가 설정될 수 있다고 수정했지만 여전히 에러 메세지가 사라지지 않았다. 

해결방법

결론은 map 매서드를 사용할 때 socialLoginImg가 undefined면 제대로 매서드가 동작하지 않기 때문에 socialLoginImg가 값이 있을 때만 map 매서드가 작동하도록 해주면 된다. 나는 && 연산자를 이용했다.

          <div className="flex mt-8">
            {socialLoginImg &&
              socialLoginImg.map((img: SocialLoginImg) => {
                return (
                  <img
                    key={img.id}
                    className={img.style}
                    src={`src/assets/images/login/${img.name}`}
                    alt={`${img.alt} image`}
                  />
                );
              })}
          </div>

타입스크립트는 변수나 함수의 타입과 관련해 오류가 있을 때만 알려주는 줄 알았는데 map 매서드 대상이 undefined 일 수도 있다고 알려줘서 정말 신기했다. 이것 역시도 타입 오류인걸까?

정적 타입 검사자인 TypeScript는 프로그램을 실행시키기 전에 
값의 종류를 기반으로 프로그램의 오류를 찾습니다. 

 

타입스크립트 공식 (번역) 문서에 위와 같이 적혀있는 걸 보면 이것까지 타입 오류가 맞나보다. 오류가 난 덕에 이것저것 시도하다가 socialLoginImg에 유니온 타입을 적용하는 것도 하나의 타입 지정 방법이라는 걸 깨달았다. 같은 결과로 얻는 방법이 여러 가지라는 걸 잊지 말자. 다시 또 화이팅~!