처음 만난 리액트 - 4. JSX

JSX란?

: 자바스크립트의 문법을 확장시킨 것 (확장 문법) (Syntax Extension to JavaScript)

-> JSX는 자바스크립트와 XML, HTML을 합친 것

 

예시를 살펴보자.

특이하게 변수선언과 html 코드가 합쳐져 있는 것을 볼 수 있는데, 이것이 JSX 코드의 특징이다. (자바스크립트 코드 + HTML 코드)

이 코드가 하는 역할은 h1 태그로 둘러싸인 문자열을 element라는 변수에 저장하는 것이다.

 

JSX의 역할

그렇다면 왜 굳이 JSX를 사용할까?

JSX는 사실 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 된다.

그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 되는데, 여기서 JSX 코드를 JavaScript 코드로 변환하는 역할을 하는 것이 바로 React의 createElement라는 함수이다.

 

 

두 코드를 비교해 보면 Hello 컴포넌트 내부에서 JSX를 사용했던 부분이 react.createElement라는 함수로 대체된 것을 알 수 있다.

결국 JSX 문법을 사용하면 React에서는 내부적으로 모두 createElement라는 함수를 사용하도록 변환하게 되는 것이다.

그리고 최종적으로는 이 createElement함수를 호출한 결과로 JavaScript 객체가 나오게 된다.

React는 이 객체(=element)들을 읽어서 DOM을 만드는 데 사용하고 항상 최신 상태로 유지합니다.

 

 

createElement 함수

 

type : 엘리먼트의 유형, 타입을 나타냄. div나 span 같은 html 태그가 올 수도 있고 다른 React 컴포넌트가 들어갈 수도 있음.

props : 속성

children : 현재 엘리먼트가 포함하고 있는 자식 엘리먼트

 

JSX를 사용하면 코드가 간결해지고 가독성이 향상되어 버그를 발견하기가 더 쉽다는 장점이 있다.

 

 

JSX 사용법

위 코드에서 엘리먼트를 선언하는 부분의 코드처럼 HTML과 자바스크립트가 섞인 형태로 코드를 작성하면 되고, 

xml, html 코드를 사용하다가 중간에 JavaScript 코드를 사용하고 싶으면 중괄호를 써서 묶어주면 된다.

 

만약 HTML 태그 중간이 아닌 태그의 속성에 값을 넣고 싶을 때에는 

아래의 코드처럼 큰 따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.

 

따라서 JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다라고 외워두는 게 좋다.