[React] props

props

헤더/아티클에 데이터 출력 합니다.

---

펑션헤더에 프롭스로 데이터 바인딩 합니다.

export default function App() {

     return (

           <div className="App">

                  <Header title="REACT"></Header>

                  <Nav></Nav>

                  <Article></Article>

           </div>

    );

}

 

 

 

<Header title="REACT"></Header>  :   펑션앱 리턴 헤더태그 타이틀 추가합니다.

function Header(props) {

     console.log("props", props.title);

     return (

         <header>

             <h1> <a href="/">{props.title}</a> </h1>

         </header>

     );

}

 

 

 

 

function Header(props)

펑션헤더 파라미터로 프롭스를 사용합니다.

 

 

 

console.log('props', props)

펑션헤더 리턴위 콘솔 찍습니다. f12 체크 합니다.

 

 

console.log('props', props.title)

펑션헤더 리턴위 콘솔에 타이틀을 추가합니다.  f12 체크 합니다.

 

 

<h1><a href="/">{props.title}</a></h1>

펑션헤더 리턴 에이치원태그 h1 텍스트를 리액트 표현식으로 데이터 바인딩 합니다.

 

test뷰를 체크합니다. 데이터가 잘 출력 되면 성공입니다.

 

 

아티클에 데이터 바인딩 합니다.

export default function App() {

    return (

        <div className="App">

            <Header title="REACT"></Header>

            <Nav></Nav>

            <Article title="Welcome" body="Hello, Web"></Article>

        </div>

    );

}

 

 

<Article title="Welcome" body="Hello, Web"></Article>

펑션앱 리턴 아티클태그 데이터 추가 합니다.

 

function Article(props) {

    return (

        <article>

             <h2>{props.title}</h2>

             {props.body}

        </article>

    )

}

 

 

function Article(props)

펑션아티클 프롭스 추가 합니다.

 

<article>

     <h2>{props.title}</h2>

     {props.body}

</article>

 

test 데이터 체크합니다.

 

 

================================================================================

최종코드

 

import "./styles.css";

 

function Header(props) {

    console.log("props", props.title);

    return (

        <header>

            <h1> <a href="/">{props.title}</a> </h1>

        </header>

    );

}

 

function Nav() {

    return (

        <nav>

            <ol>

                <li> <a href="/read/1">html</a> </li>

                <li> <a href="/read/2">css</a> </li>

                <li> <a href="/read/3">js</a> </li>

            </ol>

       </nav>

     );

}

 

function Article(props) {

     return (

         <article>

             <h2>{props.title}</h2>

             {props.body}

         </article>

    );

}

 

export default function App() {

    return (

        <div className="App">

            <Header title="REACT"></Header>

            <Nav></Nav>

            <Article title="Welcome" body="Hello, Web"></Article>

        </div>

    );

}

 

================================================================================