1. JSX란?

JSX란 JavaScript XML의 약자로, 리액트에서 사용하는 특수한 문법입니다. JSX는 HTML과 매우 유사하지만 엄연히 다른 언어이며, JavaScript 코드에서 마치 HTML을 사용해 UI컴포넌트를 만드는것 같은 편리한 개발 경험을 제공합니다. 이렇게 하면 JavaScript 코드와 HTML 태그를 함께 사용하여 UI를 렌더링할 수 있어서, UI 코드의 가독성과 유지보수성이 높아집니다 ☺️

src에 있는 App.js를 수정하며 살펴보겠습니다.

function App() {
  return (
    <div className="App">
      <h2>hello world</h2>
    </div>
  );
}

export default App;

HTML과 JavaScript를 사용해봤다면 return() 안에 있는 내용들이 익숙할 거에요. 일반적인 js에서 위와 같은 방식으로 사용한다면 에러가 발생합니다.

하지만 위와 같은 방법을 사용하면 더 편하게 컴포넌트로 분리하여 코드를 작성할 수 있습니다.

App 함수를 아래와 같이 수정해 보세요.

function App() {
  return (
    <h1>안녕, 라이캣!</h1>
  );
}

Untitled

코드를 수정한 후 터미널에서 npm start 명령어를 입력하여 실행해 봅시다.

npm start

2. JSX문법

2.1 컴포넌트의 최상위 부모 요소는 1개 즉, 단일해야 합니다.

이번에는 <h1> 태그를 이용해 2개의 태그를 작성하고 저장해보겠습니다.

function App() {
  return (
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
  );
}

Untitled

컴파일에 실패한 것을 볼 수 있습니다. 문제가 있는 부분은 이렇게 알림을 주는데요. JSX로 표현할 때에는 하나의 부모만 가질 수 있습니다. 즉, 최상위에는 한 개의 태그만 있어야 한다는 것입니다. 아래와 같이 코드를 수정하면 잘 실행되는 것을 확인할 수 있습니다.

function App() {
  return (
		<div>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</div>
  );
}

잘 동작합니다!

잘 동작합니다!