본문으로 건너뛰기

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가 있을 경우를 분기처리하여 작업했다.

Typescript