[생활코딩/React] 2022개정판 | 4. 컴포넌트 만들기

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  사용자 정의 태그 == 컴포넌트

---

 

사용자 정의 태그를 만들어보자!

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

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

👉🏻일단 App.js 파일의 코드를 다음과 같이 수정한다. 이 코드의 return안에 코드가 1억줄 있다면?? 코드를 읽기 힘들고 유지보수도 매우 힘들 것이다. 때문에 각 부분을 사용자 정의 태그로 만들어보자!

function Header() {
  return(
      <header>
        <h1><a href='/'>WEB</a></h1>
      </header>
  )
}

👉🏻App함수 위에 다음과 같은 Header 함수를 추가해보자. header tag부분을 복붙했다. 이게 바로 사용자 정의 태그인데 사용자 정의 태그를 만들 때는 주의할 점이 2가지 있다.

• 함수로 만들기
• 대문자로 시작하는 이름을 사용하기

function App() {
  return (
    <div>
      <Header></Header>
      
      ...중략...
      
    </div>
  );
}

👉🏻그리고 이전에 있던 header tag부분을 지우고 Header tag를 넣어보자!

👉🏻Header tag가 잘 출력되고 있다. 이러한 사용자 정의 태그를 컴포넌트라고 한다!

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

👉🏻덕분에 코드가 훨씬 간결해졌다! 또 각각의 코드가 이름을 갖고 있기 때문에 어떠한 코드인지 그 취지를 파악하기 쉽다. 또한 컴포넌트를 여러 군데에서 사용해도 컴포넌트 내부 코드만 변경하면 되므로 유지보수가 용이하다.