리액트 프로젝트 중 '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>> 의 코드가 짜여진 것으로 볼 수 있겠다.