props

: 리액트에서의 속성

 

어떻게 우리가 만든 컴포넌트에 속성을 부여????

function Header(props) {
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

• 컴포넌드 사용시 title = "REACT"와 같이 속성처럼 사용
• 생성한 함수에 props라는 이름의 매개변수로 받음 / 이름은 상관없지만 다들 props라 사용함
• props는 객체로
  • title : "REACT" 를 저장함

전체 코드

import logo from "./logo.svg";
import "./App.css";
function Header(props) {
  return (
    <header>
      <h1>
        <a href="/">{props.title}</a>
      </h1>
    </header>
  );
}

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

function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      <Article title="Hi" body="Hello, REACT"></Article>
    </div>
  );
}

export default App;

 

• 내가 만든 태그로 위와 같이 활용가능!

 

 

 

props로 li 만들기

function Nav(props) {
  const lis = [];
  for (let i = 0; i < props.topics.length; i++) {
    //  0 1 2 = i
    let t = props.topics[i];
    // 자동으로 생성하는 경우 key값을 부여해야함 
    lis.push( 
      <li key={t.id}> 
        <a href={"/read/" + t.id}>{t.title}</a>
      </li>
    ); //li 동적으로 만들어 주기 -> {} 사용하면 됨~~~
  }
  return (
    <nav>
      <ol>{lis}</ol>
    </nav>
  );
}
function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "js", body: "js is ..." },
  ];
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}