[React] component

컴포넌트란?

컴포넌트는 '구성 요소'라는 사전적 정의를 가지고 있으며, React에서는 HTML 코드를 재사용 가능한 단위로 묶는 방식을 말한다. 이를 통해 UI의 각 섹션을 독립적이고 재사용 가능한 부분으로 관리할 수 있다.

컴포넌트는 언제 사용하나요?

1. 반복적으로 사용되는 HTML 코드 덩어리
2. 페이지 전환이 일어나는 큰 UI 블록
3. 자주 변경되는 UI 요소

이러한 경우에 컴포넌트화하여 효율적으로 관리할 수 있다.

컴포넌트는 어떻게 사용하나요?

다음은 모달 창을 컴포넌트로 만드는 기본 예제이다

function Modal() {
  return (
    <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}

컴포넌트를 정의할 때 주의해야 할 점은
1. 함수명의 첫 글자는 반드시 대문자여야 한다.
2. return() 내부는 하나의 태그로 묶여 있어야 한다. 만약 여러 개의 독립적인 태그를 반환하고 싶다면, 하나의 요소로 감싸야 한다.
이를 위해 React Fragment인 <></>를 사용할 수도 있다.

function Modal() {
  return (
    <>
      <div className="modal">
          <h4>제목</h4>
          <p>날짜</p>
          <p>상세내용</p>
      </div>
      <div>두번째 div</div>
    </>
  );
}

컴포넌트 사용하기
컴포넌트를 사용하려면 다음과 같이 JSX 태그 형태로 삽입한다

<Modal />

끝으로 이렇게 Modal 컴포넌트를 다른 컴포넌트의 JSX 내에 삽입하여 사용할 수 있다. 이 방식은 매우 직관적이고, 코드의 재사용성을 높여 준다.