03. 컴포넌트(사용자 정의 태그) 만들기

"react는 사용자 정의 태그를 만드는 기술이다." 

 

우선 이전 실습 내용을 정리하기 위해 public폴더의 index.html에서 31행의 style~을 지워주고, app.css를 다 지운다.

그리고  App.js를 아래와 같이 코드를 수정한다.

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

function App() {
  return (
    <div className="App">
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>
      <nav>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">html</a></li>
        <li><a href="/read/3">html</a></li>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

그리고 브라우저를 다음과 같이 만든다.

---

사용자 정의 태그는 함수를 정의하여 만든다. 그리고 반드시 대문자로 시작해야 한다.

import logo from './logo.svg';
import './App.css';
function Header(){
  return <header>
  <h1><a href="/">WEB</a></h1>
</header>
}
function App() {
  return (
    <div className="App">
      <Header></Header>
      <nav>
        <li><a href="/read/1">html</a></li>
        <li><a href="/read/2">html</a></li>
        <li><a href="/read/3">html</a></li>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

3행부터 7행까지 Header라는 사용자 정의 태그를 만들었다. 그리고 11행에 사용자 정의 태그를 사용하여 수정한 뒤

브라우저를 보면 처음과 똑같다.

<Header></Header>를 11행 밑 12행, 13행 2개 정도 추가하고 5행에 WEB을 REACT로 바꾸어 결과를 확인해본다.

사용자 정의 태그만 수정해주었는데 전체가 다 수정된 것을 확인할 수 있다.

이것이 사용자 정의태그, 즉 컴포넌트의 큰 장점이다.

나머지 부분도 컴포넌트로 수정해준다.

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;

 

강의 영상 - https://opentutorials.org/course/4900/31265