👨‍💻 사건

각 컴포넌트를 리팩토링 하는 과정에서,이벤트 핸들링 부분에서 많은 생각이 이루어졌다. 디자인 시스템 특성상 사용자가 편하게 이벤트를 핸들링 할수있도록 설정해주는것이 좋아보였다. props 드릴링해서 핸들링할 함수를 주는것 보다는, 컴포넌트를 세분화 하여 직접 컴포넌트를 다루게 해주는것이 이벤트를 많이 발생하는 지역에서는 더욱 더 효율적이라 판단되었다.

컴포넌트를 분리하고, 이벤트가 발생되는 컴포넌트는 ...rest 방식을 사용하여 이벤트를 넘겨주도록 하였다. ( 어떤 속성을 부여하는지 전부다 타입지정을 해두는것은 비효율적이라 판단하였다. 또한 커스텀 속성을 부여하는 경우도 있다고 판단하여 ...rest 를 사용하기로 하였다. )

✅ 해결

여기서 문제가 생겼다. ...rest 를 통해 속성을 부여해주니, 실제로는 코드가 문제없이 돌아가지만 IDE 내에서 지정해준 타입이 아니라는 오류가 발생하고 있었다.
그래서 찾아본 방법은 다음과 같다. 객체가 동적으로 추가되는 속성을 허용할 수 있도록 index signature 를 타입에 지정해두는 방식이다. 해당 방식은 다음과 같다.

export interface ListProps {
  item: string;
  [key: string]: any; // 어떤 문자열 키도 허용하며, 값의 타입은 어떤 것이든 될 수 있습니다.
}

이 방법은 안정성을 손상시킬수는 있지만, 해당 요소에서는 사용자가 커스텀해야하는 부분이 많다고 판단하여 사용하였습니다.

💭 개선

• 만약 에러 핸들링이 추가적으로 필요하다고 판단이 되면 추가할 예정입니다.