egoing - React - component

HTML 태그를 펑션으로 분리하고 조립 합니다.

---

---

new project building

---

다양한 이슈로 프로젝트는 코드샌드박스로 진행 합니다.

뉴 프로젝트 빌딩 합니다.

---

---

컴포넌트 빌딩 합니다.

---

/* null */

 

styles.css

 

스타일 코드 삭제 합니다.

---

 

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <header>
        <h1>
          <a href="/">WEB</a>
        </h1>
      </header>
      <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>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

 

App.js

 

간단한 유아이 코딩 합니다.

---

---

컴포넌트 분리 합니다.

---

import "./styles.css";

function Header() {
  return (
    <header>
      <h1>
        <a href="/">React</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 (
    <article>
      <h2>Welcome</h2>
      Hello, WEB
    </article>
  );
}

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

 

위의 코드를 각각

<Header></Header>
<Nav></Nav>
<Article></Article>

3개의 컴포넌트로 분리하였습니다.
뷰는 이전과 똑같지만 코드를 보니 뭔가 효율적인 느낌이 듭니다.

---