Project : typescript props 조건부로 내려주기

Cell.tsx 에서 isChange 의 boolean값에 따라 함수를 조건부로 내려줘야 하는데...
삼항 연산자를 사용하기 싫어서 && 연산자로 해결하려 했는데

Cell.tsx

// Cell.tsx
const isChangeView = false

  <CellItem
    key={itemKey}
    day={day}
    salesData={salesData[0]}
    clickShowDataOfDateHandler={isChangeView &&clickShowDataOfDateHandler}
    getMinMaxSalesType={isChangeView && getMinMaxSalesType}
  />

CellItem.tsx

// CellItem.tsx
interface CellItemProps {
  day: Moment;
  salesData?: CalendarDataType;
  getMinMaxSalesType?: (param: CalendarDataType) => GetMinMaxSalesReturnType;
  clickShowDataOfDateHandler?: (day: moment.Moment) => () => Promise<void>;
}

type Cell = (param: CellItemProps) => JSX.Element;

const CellItem: Cell = ({ day, salesData, getMinMaxSalesType, clickShowDataOfDateHandler }) => { ... }

타입에러를 겪어부렀다.

Type 'false | ((day: Moment) => () => Promise<void>)' is not assignable to type '((day: Moment) => () => Promise<void>) | undefined'.
Type 'boolean' is not assignable to type '(day: Moment) => () => Promise<void>'.ts(2322)
CellItem.tsx(20, 3): The expected type comes from 
property 'clickShowDataOfDateHandler' which is declared here on type 'IntrinsicAttributes & CellItemProps'

해결

1. if,else

 if (isChangeView) {
        days.push(
          <CellItem
            key={itemKey}
            day={day}
            salesData={salesData[0]}
            clickShowDataOfDateHandler={isChangeView && clickShowDataOfDateHandler}
          />,
        );
      } else {
        days.push(
          <CellItem
            key={itemKey}
            day={day}
            salesData={salesData[0]}
            getMinMaxSalesType={!isChangeView && getMinMaxSalesType}
          />,
        );
      }

2. 삼항연산자

// Cell.tsx
<CellItem
  key={itemKey}
  day={day}
  salesData={salesData[0]}
  getMinMaxSalesType={!isChangeView ? getMinMaxSalesType : undefined}
  clickShowDataOfDateHandler = {isChangeView ? clickShowDataOfDateHandler : undefined}
/>

3.spread를 사용해서

<CellItem
  key={itemKey}
  day={day}
  salesData={salesData[0]}
  {...(!isChangeView && { getMinMaxSalesType: getMinMaxSalesType })}
  {...(isChangeView && { clickShowDataOfDateHandler: clickShowDataOfDateHandler })}
/>

위 코드를 설명하면 ...은 혹시나 해서 말하지만 rest parameter가 아니다!!

다시 돌아와서 코드를 이해해 보자면

 {...(!isChangeView && { getMinMaxSalesType: getMinMaxSalesType })}

// !isChangeView 가 true면 { ... } 객체 안에 있는 key value를 ...spread operator로 흩뿌려주세요 이다.

Q. 근데 왜 중괄호로 감싸줄까?? 🙄😶
A. props를 내려줄 때 타입이 객체 형태 잖슴!!!!

Q. 근데 전체를 중괄호로 감싸줘야만 되는건가??
A. 그건 아직까진 모르지만 아마 react 만든 사람이 저렇게는 되게끔 하지 않았을까?
-> 그냥 숨은 보물 찾기 같은 느낌이라 생각하는게 맘 편할듯

결론

3가지 방법중 멋져 보이고 싶으면 2번
팀원들 끼리라면 3번으로 가자

---

번외

spread를 이용해서

<Child {...(isTrue && { func | Value: func | Value } )} />
<Child {...(isTrue && { onClick: this.handler })} />