egoing - React - props

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

---

---

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

---

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

 

Completion

---

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

 

펑션앱 리턴 헤더태그

타이틀 추가합니다.

---

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

 

Completion

---

function Header(props)

 

펑션헤더

 

파라미터로 프롭스를 사용합니다.

---

  console.log('props', props)

 

펑션헤더 리턴위

 

콘솔 찍습니다.
f12 체크 합니다.

---

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

 

펑션헤더 리턴위 콘솔

 

콘솔에 타이틀을 추가합니다. 
f12 체크합니다.

---

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

 

펑션헤더 리턴 에이치원태그

 

h1 텍스트를 리액트 표현식으로 데이터 바인딩 합니다.

---

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

---

---

console.log

---

https://lshjju.tistory.com/747

console.log()

---

---

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

---

export default function App() {
  return (
    <div className="App">
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title="Welcome" body="Hello, Web"></Article>
    </div>
  );
}

 

Completion

---

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

 

펑션앱 리턴 아티클태그

 

데이터 추가 합니다.

---

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

 

Completion

---

function Article(props)

 

펑션아티클

 

프롭스 추가 합니다.

 

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

 

펑션아티클 아티클태그

 

데이터 바인딩 합니다.

---

test

데이터 체크합니다.

---

---

Completion

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>
  );
}

---