본문으로 건너뛰기

231220

Typescript

export const WORKLIFE = [
{
id: 1,
image: '-',
title: '-',
description: '-',
// link: null,
},
{
id: 2,
image: '-',
title: '-',
description: '-',
},
];
  • 이 경우엔 링크가 들어가는 경우도 있고 들어가지 않는 경우도 있다.
  • 링크가 들어가야하는 경우엔 링크를 기입하고, 아닐 경우엔 null처리했다

  • 하지만 이번엔 link가 들어가는 경우만 기입하고, 나머지는 제거한 후 Type을 옵셔널체이닝으로 넣어주었다.
interface Item {
id: number;
title: string;
description: string;
image: string;
link?: string;
}

  • 기존에는 서버에서 예측못하는 경우에는 undefined로 처리하고, 개발자가 예측가능한 빈 값이라면 null을 처리하려고 했었다.
  • 하지만 이 경우엔 해당 Item 타입이 매겨지는 컴포넌트는 공통컴포넌트이다.
  • 즉, link가 들어가는경우도 있고, 들어가지 않는 경우도 존재하는 것이다.
  • 이 경우 모든 Item에 해당하는 mocking data에 link를 null로 선언하는건 유지비용이 많이드는 작업이었다.
  • 그래서 옵셔널체이닝으로 타입을 매긴 후, link가 있을 경우를 분기처리하여 작업했다.