JSX란?

• javascript를 확장한 문법으로 html과 유사한 형태를 가진다.

왜 이런 문법을 만들었을까

• 리액트는 컴포넌트 기반의 설계를 중심으로 한다.
• 비유하자면 컴포넌트는 하나의 UI 부품이다.
• 컴포넌트 하나는 구조와 기능이 정해진 부품 하나를 이뤄야하기 때문에 구조를 따로 만들고 기능을 따로 만드는 것이 아니라 한 곳에서 직관적으로 구조와 기능을 만들 수 있도록 만들어진 문법이다.

예시 코드

function MyButton() {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

  return (
    <button onClick={handleClick}>
      클릭하세요
    </button>
  );
}

export default MyButton;

• 버튼이라는 하나의 컴포넌트(부품)를 만들었다.
• 클릭 이벤트 기능과 버튼 태그의 구조를 동시에 작성할 수 있다.
• 이 버튼 컴포넌트는 export되어서 필요한 곳에 import하여 사용할 수 있다. (부품처럼 가져다 끼우는 느낌)