[생활코딩|React] 01.리액트기초 1~5장/환경설정,소스 코드 수정 방법, 컴포넌트 만들기, props

1. 개발환경 설정 후 컴포넌트 생성

2. header 태그에 title props 추가

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

function Header(props) {
  console.log("props", props.title);
  return (
    <header>
      <h1>
        <a href="/">WEB</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() {
  return (
    <artricle>
      <h2>Welcome</h2>
      Hello Web
    </artricle>
  );
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

추가한 props 부분 콘솔로 확인

 

3. props를 이용하여 <Article> 태그에 title과 body props를 추가하여

<Article title = "Welcome" body = "Hello WEB"></Article>

내용반영 시키기

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="/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>
}
function App() {
  return (
    <div>
      <Header title="REACT"></Header>
      <Nav></Nav>
      <Article title = "Welcome" body = "Hello WEB"></Article>
    </div>
  );
}

export default App;

 

 

4. key 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(props) {
    const lis = [
    ]
    for(let i =0; i<props.topics.length; i++){
        let t = props.topics[i];
        lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>)
    }
  return (
    <nav>
      <ol>
        {lis}
      </ol>
    </nav>
  );
}
function Article(props) {
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
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="REACT"></Header>
      <Nav topics={topics}></Nav>
      <Article title = "Welcome" body = "Hello WEB"></Article>
    </div>
  );
}

export default App;

결과는 다음과 같다.

 

오늘은 소스코드 수정 방법과 컴포넌트를 만들고 props까지 만들어보았다.