isValidElement와 컴포넌트 타입 체크: 개발/배포 환경 간 차이 해결하기

문제

• 개발 환경에서는 정상적으로 동작하지만, 배포 환경에서는 정상적으로 동작하지 않는다.
  • ButtonGroup에서 children의 isValidElement를 체크하는 과정에서 에러가 발생한 듯하다.

const validChildren = Children.toArray(children).filter(
    (child) =>
      isValidElement(child) &&
      (
        child.type as {
          name: string;
        }
      ).name === 'Button'
  ) as ReactElement[];

  if (validChildren.length === 0) {
    throw new Error('ButtonGroup 컴포넌트는 Button 컴포넌트를 포함해야 합니다.');
  }

해결 과정

• react의 isValidElement 가 개발 환경에서는 먹히지 않나?

1. 디버깅을 해보자.

const validChildren = Children.toArray(children).filter(
  (child) =>
    isValidElement(child) &&
    (
      child.type as {
        name: string;
      }
    ).name === 'Button'
) as ReactElement[];

console.log(validChildren);

• validChildren을 console에 찍었을 때, 빈 배열이 나왔다.
  • 생각해보니 당연한 거 아닌가.. 그래서 빈 배열일 경우에 대한 에러가 발생한 것인데.

2. 디버깅 2차 시도

const validChildren = Children.toArray(children).filter((child) => {
  console.log(child);
  console.log(isValidElement(child));
}) as ReactElement[];

• true를 출력하는 것을 보니 isValidElement 의 문제는 아니었다.

• child의 속성 중 type 안의 name이 정상적으로 출력되지 않는다. 왜 “a”라 출력되는 것일까?

  

3. 디버깅 3차 시도

<Button disabled={!formState.isValid || timerStatus === 'RUNNING'} type="submit">
  인증번호 전송
</Button>
<Button disabled={!formState.isValid || timerStatus === 'RUNNING'} type="submit">
  인증번호 전송
</Button>
<Button disabled={!formState.isValid || timerStatus === 'RUNNING'} type="submit">
  인증번호 전송
</Button>

• GroupButton 내에 Button을 여러 개 넣고 시도해보았다.
  • 모든 버튼의 type>name이 “a”로 출력되고 있다. “a”를 사용하는 곳이 없는데 말이다.

4. development 환경과 비교

• production환경과 확실히 다름을 알 수 있다.

원인

• development환경과 production환경에서, chlidren의 type > name이 가지고 있는 값이 다르다는 것이 원인이었다.
  • developement환경에서의 빌딩 과정에서 컴포넌트명 등이 인코딩되어 이러한 현상이 있는 듯 하다. child.type.name===’Button’ 코드를 제거하는 것이 옳은 판단이라 생각하였다.

결론

개발 환경과 배포 환경은 완전히 동일할 수 없다. 그렇기에, 새로운 기능을 추가하였다면 배포 후 항상 여러가지 상황에서 테스트를 더 해보자.

link_preview