JSX

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다.
이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다.

 

 

이전 학습내용 

React의 특징과 장점, 적용 예제까지!

https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

 

 

개요

이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 수 있습니다. 아래 JSX 예제 코드를 미리 보여주며 JSX에 대한 설명을 시작해 보겠습니다.

const Title = <h3 id:"title" onMouseEnter={() => {console.log('mouse enter')}>Hello World</h3>

 

JSX

JavaScript를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하며, React Element를 생성합니다. 위 예제 코드를 통해 보이듯, HTML에서 사용하는 문법과 아주 흡사한 방법으로 작성할 수 있어 개발자로 하여금 React Element를 만드는데 편의를 제공해 줍니다. 이 방식은 createElement 방식에 비해 쉽게 사용할 수 있을 것입니다.

해당 코드를 HTML의 script 내부에서 React와 ReactDOM만 import 하고 실행한다면? 분명 에러가 발생할 것입니다. JSX는 JavaScript의 기본 문법이 아니고 import 한 두 라이브러리에 내용이 없기 때문이죠. 이러한 문제를 해결하기 위해 React 공식문서에서는 babel을 활용하는 것을 권장합니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js" ></script>
<script type="text/babel">
	const element = <h1>Hello, world!</h1>;
</script>

 

 

babel

자바스크립트 컴파일러

인터프리터 언어인 자바스크립트에서 컴파일러가 불필요합니다. 하지만 위 상황처럼 JSX라는 문법방식을 Javascript 파일에 작성하게 되면 Javascript에서 공식적으로 지원하는 문법이 아니기에 해석을 할 수 없습니다. babel은 컴파일러로 Javascript가 실행되기 이전, JSX와 같은 코드들을 Javascript 엔진이 이해할 수 있는 문법으로 바꿔서 실행될 수 있게 도와주는 역할을 합니다.

 

 

JSX 예제

const Title = React.createElement("h3",
	{
    	id:"title",
    	onMouseEnter={() => {console.log('mouse enter')}
    },
   	"Hello World"
   )

const Title = <h3 id="title" onMouseEnter={() => {console.log('mouse enter')}>Hello World</h3>

위 첫 번째 예제는 이전의 CreateElement를 활용한 방식, 아래는 JSX를 활용한 방식입니다. babel로 JSX코드를 번역하면 CreateElement에서 작성한 방식으로 유사하게 나오고 웹페이지에 나오는 결과에도 차이가 없지만, 코드를 보는 입장에서 시각적으로 더 도움이 됩니다.

 

 

JSX 특징

위 JSX 예제를 통해 알 수있 JSX도 표현식입니다.
Javascript 객체로 인식되어 if 구문 및 for loop 안에 사용이 가능하고, 변수에 할당하거나 인자로 받아들이고 함수로 반환하는 등의 기능이 가능합니다.

 

JSX는 HTML에서 사용하듯 key=value 방식으로 속성을 정의할 수 있습니다.
id, class 등 기존의 HTML 속성뿐 아니라, Javascript에서 지원하는 Event 또한 편리하게 정의할 수 있습니다. 여기서 주의해야 할 점은 HTML에서 속성을 작성하는 방식이 아닌 Javascript에서 사용하는 방식의 camelCase 명명 규칙으로 정의해야 합니다. (ex. class는 className, tabindex는 tabIndex)

 

또한 필요에 따라 Javascript 표현식을 삽입할 수 있습니다. 아래 예제처럼 중괄호를 사용하여 Javascript 표현식을 작성하여 정의할 수 있습니다.

const title = "Hello World!!";
const H1 = (<h1>{title}</h1>);

 

JSX로 HTML처럼 자식으로 정의됩니다.
아래 예제와 같이 태그가 비어있다면 />를 이용해 바로 닫아주거나, 필요에 따라 자식을 포함할 수 있습니다. 

const element = <img src={user.avatarUrl} />;

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

 

위 코드와 달리 JSX가 자식으로 JSX를 받고 싶다면, JSX를 함수형태로 만들어서 return 해주는 형태로 바뀌어야 합니다.

function Title() {
	return (
		<h3>Hello World</h3>
	);
}

const container = (
	<div> 
		<Title>
	<div>
)

위 방식으로 태그 안에 다른 JSX를 받아 올 수 있으나 또 한 가지 주의해야 할 점은, JSX 함수는 반드시 대문자로 시작해야 합니다! 함수를 소문자로 시작하는 이름을 명명하고 태그내부에서 불러오게 된다면, JSX는 해당 코드를 함수가 아닌 html 태그라고 착각하고 해석합니다. 전혀 다른 결과가 나올 수 있기 때문에 이 규칙을 반드시 지켜 함수를 정의해야 합니다.

 

다음 주제로는 리액트에서 지원하는 독특한 로직 useState에 대해 다루어 보겠습니다! 감사합니다

 

References

NomadCoders React 2장 : https://nomadcoders.co/react-for-beginners/lobby  
React 공식문서 JSX 없이 사용하는 React : https://ko.legacy.reactjs.org/docs/introducing-jsx.html