‘props 명’ is missing in props validation 오류 해결

또래코칭을 진행하던 한 학생분이 이 오류가 발생한다고 하셔서 찾아본 후 해결하였다.

리액트 프로젝트에서 props를 전달받을 때 ‘props 명’ is missing in props validation이라는 오류가 발생했다.

 

오류 원인

• props의 타입을 지정해주지 않아 생기는 오류.
• 오류가 나더라도 웹은 잘 작동하기 때문에 큰 문제는 없다.

 

해결 방법

1️⃣prop-types 설치

npm install -D prop-types

 

2️⃣props 사용하는 컴포넌트에서 type 정의해주기

앞서 설치한 PropTypes를 import한 후 List 컴포넌트 바깥쪽에 propTypes 지정.

 

예시 코드

src> components > List.jsx

import TodoItem from "./TodoItem";
import PropTypes from "prop-types";

const List = ({ todos }) => {
  return (
    <div className="flex flex-col gap-8">
      <h1 className="text-2xl font-semibold">Todo List</h1>
      <input
        className="w-full border rounded p-2 h-7 text-xs"
        placeholder="검색할 todo를 입력해주세요."
      />
      {todos.map((todo) => {
        return <TodoItem key={todo.id} todo={todo} />; // 스프레드 연산자 ...
      })}
    </div>
  );
};

List.propTypes = {
  todos: PropTypes.array.isRequired,
};

export default List;