/ REACT

React 컴포넌트 만들기

React은 다음과 같이 구성되어 있습니다.

React 컴포넌트 만들기

React의 본질은 사용자 정의 태그를 만드는 것입니다.

1. 왜?

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/1'>css</a></li>
          <li><a href='/read/1'>javascript</a></li>
        </ol>
      </nav>
      <article>
        <h2>Welcome</h2>
        Hello, WEB
      </article>
    </div>
  );
}

export default App;

위의 예시의 경우에는 코드 라인 수가 짧은 편이지만, 규모가 커져 백만 줄, 천만 줄…. 이상으로 라인 수가 길어진다면 한눈에 보기힘들어 가독성이 떨어지고 복잡해집니다. 이로 인해서 코드를 수정하기도 힘들어지게 되겠죠… React의 본질은 사용자 정의 태그를 만드는 것입니다.

2. 방법

function App() {
  return (
    <div className='app'>
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

간단해진 App 컴포넌트

위와 같이 <Header> , <Nav> , <Article>로 코드를 짧게 줄일 수 있습니다.

아래와 같이 각각 함수로 만들어 주면 됩니다.

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/1'>css</a></li>
        <li><a href='/read/1'>javascript</a></li>
      </ol>
    </nav>
  )
}

function Article() {
  return (
    <article>
      <h2>Welcome</h2>
      Hello, WEB
    </article>
  )
}

function App() {
  return (
    <div className='app'>
      <Header />
      <Nav />
      <Article />
    </div>
  );
}

함수로 만들 때 주의할 사항은 함수명(컴포넌트)은 항상 대문자로 시작해야 한다는 것입니다.

일반 html태그와 차이를 주는 것입니다.

함수를 만들고 App컴포넌트에 일반 태그 쓰듯이 붙여주면 됩니다.

이렇게 하면 코드의 가독성도 좋고 코드를 반복해서 사용할 필요없이 계속해서 컴포넌트를 독립된 부품처럼 가져다 쓸 수 있습니다.

또한 컴포넌트를 공유할 수 있으므로 생산성도 높아집니다.