[React] 05. props

 

 

 

 

 

🙆‍♂️props

---

props를 활용하면 컴포넌트에 인자값을 넣어서 생성할 수 있습니다.

import React from 'react';
import './App.css';

function App() {
  const nav = [
    {id:1,title:"Hello"},
    {id:2,title:"World"}
  ]

  return (
    <div className="App">
      <Header></Header>
      <Nav nav={nav}></Nav>
      <Article title="Welcome" body="Hi, How are you?"></Article>
      <Article title="GoodBye" body="See you again"></Article>

    </div>
  );
}

function Header(){
  return (
    <header className='header'>
        <h3>Web</h3> 
    </header>
  )
}
function Nav(props){
  const list=[
  ]
  for(let i=0;i<props.nav.length; i++){
    let n = props.nav[i];
    list.push(<li key={n.id}>{n.title}</li>)
  }
  return (
    <nav className='nav'>
      <ol>
        {list}
      </ol>
    </nav>
  )
}
function Article(props){
  return (
    <div className='article'>
      <h3>{props.title}</h3>
      <p>{props.body}</p>
    </div>
  )
}

export default App;

전체 코드는 이렇습니다.

 

const nav = [
    {id:1,title:"Hello"},
    {id:2,title:"World"}
]
  
<Nav nav={nav}></Nav>

이렇게 nav 객체에 값이 있고 이 값을 Nav 컴포넌트로 넘기면

 

function Nav(props){
  const list=[
  ]
  for(let i=0;i<props.nav.length; i++){
    let n = props.nav[i];
    list.push(<li key={n.id}>{n.title}</li>)
  }
  return (
    <nav className='nav'>
      <ol>
        {list}
      </ol>
    </nav>
  )
}

받아서 list라는 새로운 변수에 처리하고 저장하여 보여주게 됩니다.