출처 : 소플의 처음 만난 리액트
# JSX
JSX는 React 를 사용하여 개발할 때 거의 필수적으로 사용해야 합니다.
그렇기 때문에 이번 강의에서 JSX 의 개념을 꼭 확실하게 이해하고 넘어가시길 바랍니다.
우리는 보통 JavaScript 를 줄여서 JS 라고 많이 표기합니다.
JavaScript 관련 라이브러리도 이름 뒤에 js 가 붙어서 JavaScript 라이브러리라는 것을 나타내기도 합니다.
우리가 배우는 React 도 사실 공식 명칭은 React.js 입니다. React 공식 홈페이지 주소가 reactjs.org인 것을 보면 알 수 있죠.
JS는 JavaScript를 나타낸다는 것을 알았는데, 그렇다면 JS'X'는 무엇일까요? 이름을 보면 뭔가 JavaScript와 연관이 있을 것 같아 보입니다.
JSX = A syntax extension to JavaScript
유추했던 것처럼 자바스크립트와 연관이 있으며
쉽게 말해 JavaScript의 문법을 확장시킨 것이라고 보면 됩니다.
[JSX란?]
"JavaScript의 확장 문법"
그렇다면 JavaScript의 문법을 어떻게 확장한 것일까요?
JSX 는 JavaScript과 XML, HTML 을 합친 것이라고 보면 됩니다.
그래서 JSX의 X 는 extension 의 X 로 볼 수 도 있지만,
실제로는 JavaScript and XML 의 앞 글자를 따서 JSX라고 부르는 것입니다.
JSX 예제 코드
간단한 JSX 예제 코드를 한번 보겠습니다.
const element = <h1>Hello, world!</h1>;
-
이 코드에는 대입 연산자 "
="이 나옵니다.
이미 우리가 알고 있는 것처럼 대입연산자는 오른쪽에 있는 값을 왼쪽에 있는 변수에 대입해 주는 역할을 하죠.여기서 대입연산자의 왼쪽에 나오는 자료형 const 와 변수명인 element 까지는 우리가 흔히 사용한 JavaScript 문법입니다.
const element -
그런데 특이하게도 대입 연산자 "
=" 의 오른쪽에 HTML 코드가 나옵니다.<h1>Hello, world!</h1>
HTML의 h1 태그를 사용하였고 "Hello World"라는 문자열을 값으로 갖고 있죠.결과적으로 이 코드는 JavaScript 코드와 HTML 코드가 결합되어 있는 JSX 코드가 되는 것입니다.
이 코드가 하는 역할은
h1태그로 둘러싸인 문자열을element라는 변수에 저장하는 것입니다.JSX 를 모르는 상태에서 이 코드를 보면 굉장히 이상한 문법처럼 느껴질 수 있습니다. 하지만 앞으로 React 를 배우면서 이런 JSX 코드가 계속 나올 것이기 때문에 이 강의를 다 들은 시점에는 굉장히 익숙해져 있을 것입니다.
앞으로 계속해서 React 로 개발을 하게 된다면 필수적으로 JSX 코드와 친해져야 합니다.
# JSX의 역할
앞에서 JSX 의 개념과 예제 코드를 살펴봤습니다.
그렇다면 JSX가 해주는 역할은 무엇이고 왜 사용해야 하는지 알아보도록 하겠습니다.
JSX 는 내부적으로 XML HTML 코드를 JavaScript 로 변환하는 과정을 거치게 됩니다.
그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 되는 것이죠.
여기서 JSX 코드를 JavaScript 코드로 변환하는 역할을 하는 것이
바로 React의createElement라는 함수입니다.
# createElement() 함수의 파라미터
React.createElement(
type,
[props],
[...children]
)우리가 아직 'element' 라는 개념에 대해 배우지 않았기 때문에 여기서는 우선 createElement 라는 함수의 역할에만 주목해 보겠습니다.
먼저 JSX 로 짠 이 코드를 한번 보도록 하겠습니다.
- 이 코드를 보면 'Hello' 라는 이름을 가진
React.Component가 나오고,
Component내부에서 JS 코드와 HTML 코드가 결합된 JSX 를 사용하고 있는 것을 볼 수 있습니다.- 그리고 이렇게 만들어진
Component를ReactDOM의render함수를 사용해서 실제 화면에 렌더링( rendering , 출력 )하고 있습니다.
이 코드를 잘 기억하면서 다음 코드를 보겠습니다.
방금 전에 살펴본 코드와 거의 비슷하게 생겼죠?
이 코드는 JSX를 사용하지 않고 순수한 JavaScript 코드만을 사용해서 방금 전에 우리가 봤던 코드와 완전히 동일한 역할을 하게 만든 코드입니다.
- 두 코드를 비교해 보면, "Hello"
Component내부에서 JSX를 사용했던 부분이React.createElement라는 함수로 대체된 것을 알 수 있습니다.
결국 JSX 문법을 사용하면 React 에서는 내부적으로 모두 createElement 라는 함수를 사용하도록 변환하게 되는 것이죠.
그리고 최종적으로는 이 createElement 함수를 호출한 결과로 JavaScript 객체가 나오게 됩니다.
예제 코드
위 두 개의 코드는 JSX 를 사용한 코드와 사용하지 않은 코드이며 모두 동일한 역할을 합니다. JSX를 사용한 코드도 내부적으로는 createElement 함수를 사용하도록 변환되기 때문이죠. 
그리고 이 createElement 함수 호출의 결과로 이 코드와 같은 JavaScript 객체가 나오게 됩니다.
React 는 이 객체들을 읽어서
DOM을 만드는 데 사용하고 항상 최신 상태로 유지합니다.
React 에서는 이 객체를element라고 부릅니다.
함수의 이름이 createElement 니까 당연히 element를 생성해서 return 하겠죠?
element 에 대해서는 뒤에서 자세히 배울 예정이기 때문에 지금은 일단 이런게 있다 정도로만 알고 넘어가도록 하겠습니다.
# 파라미터
그렇다면 createElement 함수의 파라미터로는 어떤 것이 들어갈까요?
이 코드는 createElement 함수의 파라미터를 나타낸 것입니다.
type: element 유형 타입을 나타냅니다.
이 유형으로는<div>나<span>같은 html 태그가 나올 수도 있고 다른 리액터 component 가 들어갈 수도 있습니다.props: 두 번째 파라미터, 우리가 아직 react component의 'props' 라는 개념에 대해 배우지 않았기 때문에 일단은 속성들이 들어간다고만 기억해두기 바랍니다.
children: 현재 element 가 포함하고 있는 자식 element 라고 보면 됩니다.
React는 이런식으로 JSX 코드를 모두 createElement() 함수를 사용하는 코드로 변환합니다.
그렇기 때문에 리액트에서 JSX를 쓰는 것이 필수는 아닙니다.
왜냐하면 직접 모든 코드를 createElement() 함수를 사용해서 개발하면 되기 때문이죠.
다만, JSX 를 사용했을 때 코드가 더욱 간결해지고 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장합니다.
우리가 앞서 살펴본 2개의 코딩만 봐도 어떤 게 더 쉽게 작성 가능하고 쉽게 읽히는지 알 수 있는 것처럼 말이죠.
다음에 JSX 의 장점에 대해서 좀 더 자세히 살펴보도록 하겠습니다.
📍정리
- JSX 란? : JavaScript 확장 문법 ( JavaScript + XML/HTML )
- JSX 의 역할 : 내부적으로 XML/HTML 을 JavaScript 코드로 변환
React.createElement()함수 : XML/HTML을 JavaScript 로 변환, JavaScript 객체 생성- element 란? : JavaScript 객체
createElement()함수의 파라미터 :
type: element의 유형props: ( 추후 배울 예정 )children: 자식 element
