[React] Component - JSX & 컴포넌트

컴포넌트를 표현하는 JSX

JSX는 JavaScript XML의 줄임말로 '자바스크립트에 XML을 추가한 확장형 문법'으로 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다.

아래의 코드 처럼 JSX는 XML 마크업 규칙을 따르므로 <와 />의 쌍으로 맞춰주어야 한다. 기존의 HTML 마크업과 구분하기 위해 컴포넌트 이름의 첫 번째 글자를 대준자로 지정한다.

import React from "react";

class TodaysPlan extends React.Component {
  render() {
    return <div className="message-container">테스트</div>;
  }
}

export default TodaysPlan;

컴포넌트와 구성 요소

웹 사이트의 화면은 각 요소가 비슷하고 반복적으로 사용하는 경우가 많다. 이점을 착안하여 컴포넌트가 등장하게 된 것으로 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용도 할 수 있고 컴포넌트를 통해 새로운 컴포넌트를 쉽게 만들 수도 있다.

참고 : Do it! 리액트 프로그래밍 정석