[생활코딩] props , eslint] src\App.js Line 6:37: 'title' is missing in props validation react/prop-types

[생활코딩] prop 

react prop은 component의 속성이다.

 

React prop은 React 컴포넌트에서 특정한 값을 전달할 수 있도록 하는 속성(property)입니다. Prop은 다른 컴포넌트로부터 전달받을 수도 있고, 컴포넌트 내부에서 생성된 값을 전달할 수도 있습니다.
Prop을 사용하여 컴포넌트 간에 데이터를 전달하면, 데이터의 일관성을 유지하며 중복 코드를 줄일 수 있습니다. 컴포넌트의 속성은 일반 JavaScript 변수와 동일하게 다룰 수 있으며, 다른 컴포넌트에서 해당 속성을 사용할 때에는 JSX 문법을 사용하여 속성 값을 전달합니다.
React prop은 불변성을 지니며, 컴포넌트가 생성될 때는 초기 값이 설정되며, 이후에는 변경되지 않습니다. 이러한 이유로 React prop은 단방향 데이터 흐름 원칙에 따라 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있지만, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수는 없습니다.

 

리액트에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하기 위한 방법입니다. 자식 컴포넌트는 이 props 객체를 통해 데이터에 접근할 수 있으며, 컴포넌트는 데이터를 가진 하나의 props (속성을 나타내는 데이터) 객체 인자 를 받을 수 있습니다. 이러한 프롭스는 읽기 전용이므로 자식 컴포넌트는 프롭스를 통해 전달받은 데이터를 수정할 수 없습니다.

---

 

Compiled with problems:

×

ERROR

[eslint] src\App.js Line 6:37: 'title' is missing in props validation react/prop-types Line 10:28: 'title' is missing in props validation react/prop-types Search for the keywords to learn more about each error.

오류인상황,

import React from "react";

import "./App.css";
import "./index.css";

function Header(props) {
  console.log("props", props, props.title);
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}



function Aticle() {
  return (
    <aticle>
      <h2>Welcome</h2>
      Hello, React
    </aticle>
  );
}

function App() {
  return (
    <div>
      <Header title="Another React"></Header>
      <Aticle></Aticle>
      <Header></Header>
    </div>
  );
}

export default App;

 

 

해결된상황

import React from "react";
import PropTypes from "prop-types";
import "./App.css";
import "./index.css";

function Header(props) {
  console.log("props", props, props.title);
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

function Aticle() {
  return (
    <aticle>
      <h2>Welcome</h2>
      Hello, React
    </aticle>
  );
}

function App() {
  return (
    <div>
      <Header title="Another React"></Header>
      <Aticle></Aticle>
      <Header></Header>
    </div>
  );
}

export default App;

ㅇㅁㅇㅁ

 

추가한 상태

 

import PropTypes from "prop-types";

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

ERROR
[eslint] src\App.js Line 6:37: 'title' is missing in props validation react/prop-types Line 10:28: 'title' is missing in props validation react/prop-types Search for the keywords to learn more about each error.

ERROR 대로

 

title missing 부분을 채워서 해결했다.

 

정상작된 모습