[React] - [처음 만난 리액트] - 09. JSX란?, JSX의 정의와 역할 (React.createElement 함수란?)

🧹 두서없이 적는 쉬운 정리

1. JSX는 Javascript에 XML/HTML을 추가한 JS 확장 문법

2. JSX는 내부적으로 XML/HTML 코드를 React.createElement() 함수를 통해 자바스크립트로 변환한다.

3. React.createElement() 함수 호출 한 결과는 JS 객체가 나온다.

4. 리액트에서 이 객체를 '엘리먼트'라고 부르고 이 객체로 DOM을 만드는 데 사용하고 항상 최신 상태로 유지한다.

5. React.createElement() 함수 파라미터는 3가지[ type(엘리먼트의 유형), props(속성) , children(엘리먼트의 자식 엘리먼트)]

6 JSX 를 사용하는 것은  필수는 아니다  React.createElement() 를 사용해서 개발할 수 있기 때문.

7. 다만 JSX를 사용했을 때 코드가 간결 해지고 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장

 

 

(자세한 내용은 아래 참고)

 

 

---

 

 

👀 JSX란?

JSX란 'Javascript에 XML/HTML 을 추가한 JS 확장 문법'이다.

아래 JSX 예제코드를 보면 대입연산자 '=' 의 오른쪽에 HTML 코드가 보여진다. 

const element = <h1>Hello, world!</h1>;​

 

🥸 JSX의 역할

JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 된다

JSX코드를 자바스크립트 코드로 변환하는 역할을 하는 것이 바로 React.createElement() 함수이다.

---

 

🧑🏻‍💻 JSX 예제

Hello 컴포넌트 내부에 JS와 html이가 결합된 JSX를 사용하고 있다.

그리고 이렇게 만들어진 Hello 컴포넌트를 React DOM에 reder() 함수를 사용하여 실제 화면에 렌더링 하고 있다.

 

이전 코드와 거의 비슷하지만 JSX를 사용하지 않고 JS만을 사용하여 이전과 동일한 역할을 한다.

Hello 헬로 컴포넌트 내부를 보면 이전에 JSX를 사용했던 부분이 React.createElement() 함수로 대체 것을 알 수 있다.

 

결국 JSX 문법을 사용하면 리액트에서는 내부적으로 React.createElement() 함수를 사용하도록 변환된다.

최종적으로 React.createElement() 함수 호출 한 결과는 JS 객체가 나온다.

 

 

---

🐠 JS 객체(React.createElement() 함수 호출 결과)

위 두개의 코드는 JSX를사용한 코드와 사용하지 않은 코드 이며 모두 동일한 역할을 한다.

JSX를 사용한 코드는 내부적으로는  React.createElement() 함수를 사용하도록 변환되기때문.

 

 그리고 React.createElement() 함수 호출의 결과로

아래와 같은 자바스크립트 객체가 나온다.

 

리액트는 이 객체들을 읽어서 DOM을 만드는 데 사용하고 항상 최신 상태로 유지한다.

리액트에서는 이 객체를 엘리먼트라고부른다.

 

함수의 이름이 React.createElement()이니 당연히 엘리먼트를 생성.

(엘리먼트에대해서는 뒤에서 자세히 배울 예정)

 

---

🚜 React.createElement() 함수의 파라미터

 

🎏 첫 번째 파라미터 : type(엘리먼트의 유형)

<div>나 <span> 같은 html 태그 혹은  리액트 컴포넌트가 들어갈 수 있다.

 

🫘 두 번째 파라미터 : props 

간단하게 속성들이 들어간다고 보면 된다.(추후 깊이 학습할 예정) 

 

👨‍👩‍👦 세 번째 파라미터로 : children

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

 

---

🕵🏻 JSX는 필수?

리액트는 이런 식으로 JSX 코드를 모두 React.createElement()  함수를 사용하는 코드로 변환한다.

 

그렇기 때문에 리액트에서 JSX를 사용하는 것이 필수는 아니다

직접 React.createElement() 를 사용해서 개발할 수 있기 때문.

 

 다만 JSX를 사용했을 때 코드가 간결 해지고 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장한다.

다음에서 JSX의장점에 대해서 좀 더 자세히 살펴보도록 하자.

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.