React - 사용자정의 태그 만들기

2023.01.25 사용자정의 태그 만들기

리액트 샘플 앱의 내용을 수정하고
수정 코드가 1억개가 있다고 가정해보자.

그렇다면 정리를 하고 싶을 것이다.

이제 사용자 정의 태그를 만들어보자.

리액트 컴포넌트(Component)란?

사용자정의태그

• 리액트로 만들어진 앱을 이루는 최소한의 단위

• 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
  (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

컴포넌트 종류

함수 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

클래스 컴포넌트

ES6 class를 사용하여 컴포넌트를 정의할 수 있습니다.

class Welcome extends React.Component {
 render() {
   return <h1>Hello, {this.props.name}</h1>;
 }
}

React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다.

✨ 함수 컨포넌트 사용

함수 컨포넌트 만들기

Header 함수 컨포넌트를 정의하고 (대문자로 시작)
기존 header자리에는 Header 태그를 넣는다.

기존코드

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;

컨포넌트 적용 코드

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

export default App;