컴포넌트와 JSX

컴포넌트

컴포넌트는 재사용이 가능한 UI 구성 요소를 의미한다.

웹에서는 HTML을 통해 다음과 같은 태그를 사용하여 문서 구조를 만들 수 있다.

<section>
  <h2>소개</h2>
  <div>
    <article>
      <h3>👨‍🎓 교육 및 활동</h3>
      <ul>
        <li>👉 2023 프론트엔드 개발자 인턴십 (ABC Tech)</li>
        <li>👉 2022 웹 개발 부트캠프 수료 (XYZ Coding School)</li>
        <li>👉 2021 오픈소스 프로젝트 참여 (오픈소스 커뮤니티)</li>
        <li>👉 2020 대학 동아리 웹 개발 팀장 활동</li>
      </ul>
    </article>
    <article>
      <h3>🧑‍💻 자격증</h3>
      <ul>
        <li>👉 2023 정보처리기사</li>
        <li>👉 2022 AWS Certified Solutions Architect</li>
        <li>👉 2021 자바 프로그래밍 1급</li>
        <li>👉 2020 웹디자인 기능사</li>
      </ul>
    </article>
  </div>
</section>

위와 같은 마크업과 CSS, JS를 결합하여 웹에서 볼 수 있는 UI를 만들 수 있다.
하지만 이러한 HTML마크업과 CSS, JS만을 사용하면 비슷한 구조의 UI를 반복하여 사용할 때 중복되는 코드를 반복하게 된다.
위의 코드에서도 하나의 section안에 같은 구조의 article이 2번 반복된다.
이렇게되면 코드의 가독성도 떨어지고, 스타일이나 JS코드를 변경할 경우 여러곳에서 수정을 해야하는 문제점이 발생한다.
이때 React를 사용하여 이러한 요소를 컴포넌트로 결합할 수 있다.

React 컴포넌트

React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript함수이다.
이전의 코드를 React의 컴포넌트로 구성하면 다음과 같이 변경할 수 있다.

<section>
  <h2>소개</h2>
  <div>
    <Article
      title="👨‍🎓 교육 및 활동"
      datas={[
        "👉 2023 프론트엔드 개발자 인턴십 (ABC Tech)",
        "👉 2022 웹 개발 부트캠프 수료 (XYZ Coding School)",
        "👉 2021 오픈소스 프로젝트 참여 (오픈소스 커뮤니티)",
        "👉 2020 대학 동아리 웹 개발 팀장 활동"
      ]}
    />
    <Article
      title="🧑‍💻 자격증"
      datas={[
        "👉 2023 정보처리기사",
        "👉 2022 AWS Certified Solutions Architect",
        "👉 2021 자바 프로그래밍 1급",
        "👉 2020 웹디자인 기능사"
      ]}
    />
  </div>
</section>

중복되는 마크업과 스타일이 있는 article부분을 Article이라는 새로운 컴포넌트를 만들어 데이터를 넘겨주어 재사용하는 방식을 사용할 수 있다.
이때 Article컴포넌트의 내부는 다음과 같이 구성된다.

interface ArticleProps {
  title: string;
  datas: string[];
}

const Article = ({ title, datas }: ArticleProps) => {
  return (
    <article>
      <h3>{title}</h3>
      <ul>
        {datas.map((data) => (
          <li key={data}>{data}</li>
        ))}
      </ul>
    </article>
  );
};

export default Article;

eaport default를 통해 컴포넌트를 내보낼 수 있으며, 사용하는 부분에서 import구문을 통해 받아와 사용한다.

React 컴포넌트는 일반적인 JS함수지만 표준 HTML태그와 구분하기위해 이름의 첫글자는 반드시 대문자로 시작해야 한다.

위에서 React의 컴포넌트는 마크업으로 뿌릴 수 있는 JS함수라고 하였다.
하지만 일반적인 JS에서 HTML태그를 직접 사용하면 오류가 발생하는데 React에서는 어떻게 이것이 가능할까?
바로 JSX와 이를 해석하여 JS코드로 만들어주는 트랜스파일러라는 것을 사용한다.

JSX

먼저 JSX는 리액트에서만 사용하는것으로 알고있는 사람들이 있는데 그것은 잘못된 사실이다.
JSX란 XML과 유사한 내장형 구문으로 메타(페이스북)에서 개발한 JavaScript의 확장 문법으로, JS파일 내에서 마크업을 작성할 수 있게 해주는 역할을 한다.

JSX는 메타에서 독자적으로 개발한것으로, ECMAScript의 일부가 아니다.
따라서 V8엔진과 같은 자바스크립트 엔진이나 웹 페이지에서 실행되지 않는다.
그렇기때문에 JSX코드는 JS런타임이 이해할 수 있는 코드로 변환하는 트랜스파일 작업을 반드시 거쳐야 한다.

JSX와 React는 서로 별개의 개념으로, 함께 사용하는 경우가 많지만 독립적으로 사용할수도 있다.
JSX는 JS의 확장된 문법이고, React는 JS의 라이브러리이다.