[Typescript] 필수가 아닌 타입 설정하기

 

가끔 TS를 쓰면서 ?를 붙여서 필수 요소가 아닌 속성을 설정할 수 있다.

요로케

export type PrivateRouteProps = {
  auth: InitialStateType;
  outlet: JSX.Element;
  study?: boolean;
};

 

현재 study라는 인자를 옵션으로 받고 있는건데 그러면 이 옵션이 안올 때를 대비해서 미리 default값을 설정해줘야한다.

그러지 않으면 에러뜬다

defaultProps 세팅해주라고 합니다

그러면 해주면 된다.

 

PrivateRoute.defaultProps = {
  study: true
};

이런 식으로 기본값을 설정해주면 에러가 사라지는 모습을 볼 수 있다.

PrivateRoute는 컴포넌트 이름이다.

 

 

완성 코드

 

export type PrivateRouteProps = {
  auth: InitialStateType;
  outlet: JSX.Element;
  study?: boolean;
};

function PrivateRoute({ auth, outlet, study }: PrivateRouteProps) {
  const { check } = auth;
  const toast = useToast();

  // 로그인x
  if (!check) {
    toast({ title: "로그인 해주세요!", position: "top", duration: 1000 });
    return <Navigate to="/" />;
  }

  return outlet;
}

PrivateRoute.defaultProps = {
  study: true
};

export default PrivateRoute;