[생활코딩] props 강의 key, component, props

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(props) {
  return (
    <aticle>
      <h2>{props.title}</h2>
      {props.body}
    </aticle>
  );
}

function App() {
  return (
    <div>
      <Header title="Another React"></Header>
      <Aticle title="Welcome" body="Hello, WEB"></Aticle>
      <Header></Header>
      <Aticle title="Hi" body="Hello, React"></Aticle>
    </div>
  );
}

export default App;

 

 

코드설명

"Header"라는 함수가 있고 “props” 매개변수를 받습니다. 이 함수는 “props” 객체와 그 객체의 “title” 속성을 콘솔에 기록합니다.

첫 번째 “props” 인스턴스는 함수에 전달되는 매개변수의 이름입니다. 두 번째 “props” 인스턴스는 “props” 객체의 속성에 액세스하는 데 사용됩니다.

세 번째 “props.title” 인스턴스는 “props” 객체의 “title” 속성의 값을 액세스하는 데 사용됩니다.

 

 

 props란 무엇일까?

 

먼저, prop란 React 컴포넌트에서 부모 컴포넌트로부터 전달받은 속성(property)값을 말합니다.

예를 들어, 아래와 같이 부모 컴포넌트에서 자식 컴포넌트에게 name과 age 속성을 전달한다고 가정해봅시다.

```jsx
function ParentComponent() {
  return <ChildComponent name="John" age={30} />;
}
```

자식 컴포넌트에서는 props 파라미터를 통해 전달받은 속성값을 사용할 수 있습니다. 예를 들어, 아래와 같이 props.name과 props.age를 사용할 수 있습니다.

```jsx
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}
```

이 경우, ChildComponent의 props.name 값은 "John", props.age 값은 30이 되겠죠. 이와 같이 부모 컴포넌트에서 자식 컴포넌트에게 전달한 속성값을 prop를 통해 이용할 수 있습니다.

 

[생활코딩] props 강의 key, component, props 

 

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 Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(
      <li key={t.id}>
        <a href={"/read/" + t.id}>{t.title}</a>
      </li>
    );
  }

  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function App() {
  const topics = [
    { id: 1, title: "html", body: "htm; is ..." },
    { id: 2, title: "css", body: "css; is ..." },
    { id: 3, title: "javascript", body: "javascript; is ..." },
  ];

  return (
    <div>
      <Header title="Another React"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, React"></Article>
    </div>
  );
}

export default App;

코드설명

React와 여러 CSS 파일을 가져오고 Header, Nav, Article 그리고 App 함수를 정의합니다. Header 함수는 props를 받아와서 props.title을 출력하고, 해당 title을 이용해서 header 태그와 h1 태그를 반환합니다. Nav 함수는 props를 받아와서 props.topics을 이용해서 리스트 아이템들을 생성한 후에 ol 태그 안에 넣어 반환합니다. Article 함수는 props를 받아와서 해당 props.title과 props.body를 이용해서 h2 태그와 article 태그를 반환합니다. App 함수는 topics 객체에 여러 아이템들을 정의하고, Header, Nav, 그리고 Article 컴포넌트를 이용해서 화면을 구성합니다. 결과적으로는 Header, Nav, 그리고 Article 컴포넌트를 조합해서 하나의 웹 페이지를 생성하는 것입니다.