is missing in props validation

김도빈·2023년 9월 24일

리액트 프로젝트 중 'setModalOpen is missing in props validation' 이라는 오류가 esLint로부터 발생했다.

직역을 해보면 setModalOpen 가 props 확인(validation)이 되지 않는다. 정도로 해석이 될 수 있는 것 같다.

다시 한 번 의역을 해보자면 setModalOpen 대한 구체적인 정보가 부족하다. 라고 할 수 있을 것 같다.

구글링을 해보면 prop에 대한 타입을 지정해 줄 수 있는 패키지인 prop-types를 설치한 후 해당 prop에 대한 타입을 추가적으로 지정해주어라라는 글이 많았는데

결국 타입을 지정해주는 것이라면 굳이 저런 것을 꼭 설치해서 타입을 지정해야 하나? 라는 생각이 들었다.

그래서

interface 컴포넌트명 {
  setModalOpen: React.Dispatch<React.SetStateAction<boolean>>
}

을 만들어서

const Modal: React.FC<ModalProps> = ({ setModalOpen }) => {.....

컴포넌트에 타입을 지정해주었다!

해결 방식으로만 보면 TS 쪽의 해결방식 같은데 이렇게도 esLint로부터 비롯된 오류가 해결되었다...!

지금 건의 경우 props에 전달된 부분이 useState의 setModalOpen 이라는 boolean 값을 컨트롤 하는 녀석이여서,

React.Dispatch<React.SetStateAction<boolean>> 의 코드가 짜여진 것으로 볼 수 있겠다.

profile
사용자를 대변하고 싶은 프론트엔드 개발자

0개의 댓글