React 강의 정리 (4강)

4강

컴포넌트 만들기

사용자 정의 태그 만들기

 

+

<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다.

<nav>
    <a href="/html/intro">HTML</a> |
    <a href="/css/intro">CSS</a> |
    <a href="/javascript/intro">JavaScript</a>
</nav>

<li> 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다.

 

App.js가 아래와 같아

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

function App() {
  return (
    <div>
      <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>
  );
}

사용자 정의 태그를 컴포넌트라고 함

컴포넌트를 써서 아래와 같이 줄어듬

import logo from './logo.svg';
import './App.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>
}
function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

밑에 App를 보면 3줄로 줄어든 것을 볼 수 있다.

 

참고: 생활코딩 react 2022 개정 강의

https://www.youtube.com/watch?v=t9e3hMJ_s-c&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=5