[React] React 컴포넌트(component)란?

컴포넌트

리액트는 사용자가 정의한 태그를 만들 수 있다.

그렇다면 어떻게 사용자가 정의한 태그를 만들 수 있을까?

 

우선, 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>
        <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;

이 코드를 보면 헤더영역, NAV영역, 본문 영역으로 나눠져있고

그 안에 세부적으로 또 코드가 있는 형태이다.

만약 이 코드가 이렇게 적고 단순한 코드가 아니라 굉장히 많은 내용을 가지고 있는 코드라면

하나하나 수정하는데 많은 시간을 소요할 것이다. 

 

우리는 이것들을 정리정돈 할 필요가 있고 같은 영역의 내용들끼리 묶어서 정리할 필요가 있다.

리액트에서는 이런 문제를 해결하기 위해

같은 영역의 내용들을 하나의 태그로 묶어 사용자 정의 태그를 만들 수 있다.

 

사용자 정의 태그를 만드는 방법은 간단하다.

만약 위 코드의 <header> 태그 안에 있는 내용을 묶어 정의하고 싶다면 

 

1. App함수 위에 새로운 함수를 만들어 주면 된다.
2. Header라고 함수명을 지어보자. (참고로 사용자 지정 태그의 함수명 첫 글자는 무조건 대문자이어야 한다.)
3. 그리고 그 안에 return 값으로 <header> 태그 안에 있는 내용을 줘보자. 
4. 그 다음 Header를 App.js의 원래 <header> 태그 부분에 넣어보자.

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

(코드를 수정하기 전과 차이가 없는 것을 볼 수 있다.)

---

이걸 사용하면 뭐가 좋은가?

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 />
      <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를 사용하는 부분이 많다고 가정해보자.

사용자 정의태그를 사용하지 않았다면

<header>부분에 수정할 것이 있을때 마다 하나하나 다 수정을 했을 것이다.

하지만 사용자 정의 태그를 사용하므로써 Header 함수 안에 있는 코드만 바꾸면 

한번에 모두 바뀌는 것을 볼 수 있다.

 

예시

만약, <header>태그 안에 있는 내용을 WEB이 아니라 React로 바꾸고 싶다면 

하나하나 바꾸는 것이 아니라 Header함수 안에 있는 WEB을 React로만 바꿔주면 된다.

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

function Header() {
  return (
    <header>
      <h1>
        <a href="#">React</a>
      </h1>
    </header>
  );
}

function App() {
  return (
    <div className="App">
      <Header />
      <Header />
      <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>부분 이외에 그 밑의 코드들도 정리해 줄 수 있게 되었다.

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 className="App">
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

export default App;

코드 양은 길어졌을지언정 화면에 보여지는 부분인 App함수 부분은

복잡하지 않고 굉장히 간단해진 것을 볼 수있다.

 

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

---

참고한 영상

https://opentutorials.org/course/4900/31265

컴포넌트 만들기 - 생활코딩