displayName 타입 에러

[DearYuto]

이슈

하드코딩 상수 처리 시 발생

export default function ModalContents({ children }: Props) {
  // ... 생략
}

ModalContents.displayName = DISPLAY_NAME.contents;

디스플레이 네임을 상수처리 후 displayName에 할당했다.

(property) ModalContents.displayName: "Modal.Contents"

vscode 에디터가 ModalContents의 displayName 속성의 값으로
Modal.Contents가 될 것으로 예측하고 있다.

const PREFIX = 'Modal';

const DISPLAY_NAME = Object.freeze({
  container: `${PREFIX}`,
  overlay: `${PREFIX}.Overlay`,
  contents: `${PREFIX}.Contents`,
  closeButton: `${PREFIX}.CloseButton`,
});

상수 값은 위와 같으므로 예상되는 displayName은 Modal.Contents 일 것이다.

모달의 children으로 들어와야 할 컴포넌트를 제한하기 위해
displayName으로 구분하고자 했다.

const allowedDisplayNames = [DISPLAY_NAME.contents, DISPLAY_NAME.closeButton];
// const allowedDisplayNames: ("Modal.Contents" | "Modal.CloseButton")[]

스토리북에서 에러가 발생하여 살펴보니 Modal.Contents 가 아닌, ModalContents 로 디스플레이 네임이 설정되어 에러가 발생하고 있다.

ModalContents.displayName = 'Modal.Contents';

하드코딩하여 적용 시 에러가 사라지는데...
어디에서 동작이 달라지는 건지 체크가 필요할 것 같다.

[DearYuto]

다른 값으로 변경해봤는데 문제는 다른 변수에 넣은 값을 대입 시킬 경우
displayName이 의도된 동작으로 수행되지 않는 것으로 확인되었다.
따라서 하드 코딩으로 변경하여 에러를 픽스할 수 밖에 없었음. (원인 불명)

[DearYuto]

codesandbox에서 동일하게 사용 시 정상적으로 동작하는 것으로 확인.
개발 환경 문제일 수도 있을 것 같음.

[DearYuto]

혹시 해서 개발 환경에 컴포넌트 생성 후 확인해봄. -> 정상 동작 (리액트 문제아님)
결론은 스토리북 환경 문제인걸로 확인

[DearYuto]

#17
해결완료.