React-props

Props란

• 컴포넌트에 데이터를 전달하는 방법으로 React의 대표적인 개념이라고 볼 수 있다.

import logo from './logo.svg';
import './App.css';

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

function Nav(){
  return <nav>
    <ol>
      <li><a href="/">html</a></li>
      <li><a href="/">css</a></li>
      <li><a href="/">js</a></li>
    </ol>
  </nav>
}

function Article(){
  return <article>
    <h2>Hello, WEB</h2>
  </article>
}


function App() {
  return (
    <div className="App">
      <Header title="React"></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

Header 함수 파라미터 안에 props 라는 이름의 속성을 임의로 만들어서 console.log를 찍어서 확인해 보았다.

위와 같이 props의 속성이 나타난다.

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

props.title을 넣으면 그대로 출력된다. props.title의 값인 React를 넣고 싶다면 중괄호를 붙여야 한다.

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

중괄호를 붙임으로써 props.title의 값인 React가 출력된다.

Article에 props 파라미터를 넣어 속성을 추가해보았다.

import logo from './logo.svg';
import './App.css';

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

function Nav(){
  return <nav>
    <ol>
      <li><a href="/">html</a></li>
      <li><a href="/">css</a></li>
      <li><a href="/">js</a></li>
    </ol>
  </nav>
}

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


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

export default App;