[React] Component 및 Fragment 태그 사용하기

Component 사용하여 코드 간단하게 만들기

function App() {

  return (
    <div className='App'>
      <div className='list'>
        <h3> 제목 </h3>
        <p> 날짜 </p>
        <hr />
      </div>
      <div className='list'>
        <h3> 제목 </h3>
        <p> 날짜 </p>
        <hr />
      </div>
    </div>
  );
  
}

---

 

위와 같은 코드처럼 반복적으로 코드를 작성해야할 때 Component를 아래와 같이 작성합니다.

function List() {
  return (
    <div className='list'>
      <h3> 제목 </h3>
      <p> 날짜 </p>
      <hr />
    </div>
  )
}

• 새로운 function을 만들어 Component를 생성합니다.
• 관습적으로 함수명은 대문자로 시작합니다.
• return() 안에 있는건 태그 하나로 묶어서 그 안에서 작성해줘야 합니다. (만약 의미 없는 <div>를 사용하고 싶지 않을 땐 Fragment를 사용합니다. - 아래 글 참고)

---

Fragment 태그

// 방법 1
function List() {
  return (
    <Fragment>
      <h3> 제목 </h3>
      <p> 날짜 </p>
      <hr />
    </Fragment>
  )
}

// 방법 2
function List() {
  return (
    <>
      <h3> 제목 </h3>
      <p> 날짜 </p>
      <hr />
    </>
  )
}

• 방법 1 : <Fragment> </Fragment>
• 방법 2 : <> </>

---

전체 코드

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className='App'>
      <List />
      <List />
    </div>
  );
}

function List() {
  return (
    <div className='list'>
      <h3> 제목 </h3>
      <p> 날짜 </p>
      <hr />
    </div>
  )
}

export default App;

Component를 사용하였더니 위 코드와 같이 코드 수가 줄어들어 가독성이 좋아진 것을 확인할 수 있습니다.