문제

• 개발 환경에서는 정상적으로 동작하지만, 배포 환경에서는 정상적으로 동작하지 않는다.

  • 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>