React - 입문 기록 3

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

 

만약 아래와 같은 코드가 있다고 가정한다.

- src/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;

 

이 코드에서 추가나 수정, 삭제 작업이 필요할때

지금 당장은 작업에 어려움이 없겠지만

만약 <header>나 <li>, <article>의 내용이 수백 수천 수만 줄이라면,

작업을 진행하기 이전에 코드를 파악하는 것조차 벅찰 것이다.

 

이를 간편하게 하기 위해 기존 HTML 태그가 아닌

사용자가 직접 정의한 태그를 사용하는 기술이 React이다.

src/App.js에 다음과 같이 내용을 변경한다.

import logo from "./logo.svg";
import "./App.css";
// 함수를 사용하여 사용자 정의 태그를 만든다.
// React에서 사용자 정의 태그를 위한 함수를 만들때에는
// 반드시 이름이 대문자로 시작하여야 한다.
function Header() {
  return (
    <header>
      <h1>
        <a href="/">WEB</a>
      </h1>
    </header>
  );
}

function App() {
  return (
    <div>
      <Header></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를 선언한다.

React를 사용하기 위해선 반드시 함수의 이름이 대문자로 시작하여야 한다.

기존 <header>태그에 있던 내용을 리턴하도록 함수의 내용을 입력한다.

 

그 후 기존 <header>태그가 있던 자리에 함수로 선언한 사용자 정의 태그 <Header>를 입력하고 웹 서버를 실행하면

기존과 동일한 내용을 실행하는 것을 확인할 수 있다.

 

또한 함수이기 때문에 몇번을 반복해서 사용하여도 무방하며, 

함수의 내용을 수정하는 것만으로 이 함수를 사용하는 모든 태그에 똑같이 적용할 수 있다.

위와 같이 사용자가 직접 정의한 태그를 React에서는 컴포넌트(Component)라고 부른다.

 

나머지 태그도 똑같이 컴포넌트로 만든다.

import logo from "./logo.svg";
import "./App.css";
// 함수를 사용하여 사용자 정의 태그를 만든다.
// React에서 사용자 정의 태그를 위한 함수를 만들때에는
// 반드시 이름이 대문자로 시작하여야 한다.
function Header() {
  return (
    <header>
      <h1>
        <a href="/">WEB</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>
      <Header></Header>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

 

 

웹의 구성은 변하지 않았지만 src/index.js가 호출하는 함수 App의 내용은 훨씬 간단해졌고

코드의 파악과 활용성을 높이는 효과를 얻었다.

 

또한 함수 APP을 export하였으므로 다른 사람이 내가 작성한 코드를 사용할 수도,

내가 다른 사람의 코드를 사용할 수도 있다.