3. 컴포넌트 만들기

 

https://www.youtube.com/watch?v=WT58gOl8Eh8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=4

리액트는 사용자 정의 태그를 만드는 기술이다.

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

export default App;

이런 복잡한 코드를 사용자 정의 태그로 깔끔하게 만드는 것이 리액트다.

사용자 정의 태그를 만들 때는 함수를 정의하면 된다. 예전에는 class를 만들어서 사용했다고 하는데 요즘은 함수를 만들어서 사용한다고 한다.

 

리액트에서 사용자 정의 태그를 만들 때 반드시 첫 글자는 대문자 여야 한다.

//App.js

function Header() {
  return  <header>
  <h1><a href='/'>WEB</a></h1>
</header>
}

<header> 태그를 내가 재정의 한 것이다.

//App.js
...
function Header() {
  return  <header>
  <h1><a href='/'>WEB</a></h1>
</header>
}
function App() {
  return (
    <div>
      <Header></Header>
...

이렇게 하면 메인 App이 훨씬 깔끔해진다.

 

 

컴포넌트

리액트에서 사용자 정의 태그를 컴포넌트라고 한다.

 

컴포넌트를 이용하면 훨씬 깔끔하게 코드를 작성할 수 있고, 의미를 파악하기 쉽다.

리액트를 이용하면 여러 태그를 독립된 부품으로 이용할 수 있고, 컴포넌트를 서로 공유할 수 있다.

 

//App.js

import logo from './logo.svg';
import './App.css';
function Header() {
  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 <article>
    <h2>Welcome</h2>
    Hello, WEB
  </article>
}

function App() {
  return (
    <div>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>  
  );
}

export default App;