React+ 002 컴포넌트

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

어떻게? 왜?

import "./App.css";

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>
  );
}
export default App;

현재는 이렇게 간단한 페이지를 가지고 있는데 혹여 이 코드줄이 엄청나게 많다면 가독성이 좋지 않게된다.

그룹하고 이름을 붙여주는게 사용자 정의 컴포넌트를 만드는 것이다.

 

 

 

 

위의 header 부분을 다른 펑션을 사용해  이렇게 나누어 줄 수 있다.

import "./App.css";
function Header() {
  return (
    <header>
      <h1>
        <a href="/">Web</a>
      </h1>
    </header>
  );
}
function App() {
  return (
    <div className="App">
      <Header />
      <nav>
      ...

이러면 이제 Header가 필요한 곳은 어디든지 간단하게 복사에서 사용할 수 있게 된다.

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

import "./App.css";
function Header() {
  return (
    <header>
      <h1>
        <a href="/">React</a>
      </h1>
    </header>
  );
}
const 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>
  );
};
const Article = () => {
  return (
    <article>
      <h2>Welcome</h2>
      Hello WEB
    </article>
  );
};
function App() {
  return (
    <div className="App">
      <Header />
      <Nav />
      <Article />
    </div>
  );
}
export default App;

컴포넌트들로 만들어줘서 작성한 코드

이렇게 컴포넌트를 만드는 리액트 덕분에 여러 태그들을 하나의 독립된 부품으로 만들 수 있게 되었고 그 부품을 이용하면 적은 복잡성으로 코드를 만들 수 있고 공유가 가능해진다. 생산성이 아주 높아진다.