React.js - JSX를 사용하지 않고 createElement를 사용하기

 

---

JSX를 대신해서 리액트 object 형태로 표현하기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 이번 시간에는 JSX를 사용하지 않고 리액트로 엘리먼트를 생성하여서 사용하는 방법을 알아보겠습니다. 다시 말하면 JSX는 리액트에서 필수가 아닙니다. 쉬운 개발과 성능의 이점때문에 대부분의 리액트 환경에서 JSX를 사용하는 것입니다. 저와 배워보는 리액트들도 JSX를 기준으로 예제를 만들어 갈것입니다. 그래도 JSX 없이 어떻게 element를 생성하는지 알아보겠습니다.

 

● 2. JSX를 사용했을 때 사용했던 간단한 방식입니다. HTML을 그대로 사용하면 되는 방식이었습니다. 덕분에 새롭게 문법을 배울 필요가 없었습니다.

const jsxElement = <h1 className="jsx">JSX Element </h1>

 

● 3. 하지만 만약 리액트의 기능을 사용한다면 아래처럼 매우 길어지게 됩니다. 

1번 라인 : 리액트에서 제공하는 엘리먼트를 작성하는 기능을 사용합니다. 

2번 라인 : type이 옵니다. 태그가 자리합니다. 여기서는 <h1> 태그를 사용했습니다.

3번 라인 : props를 사용합니다. className이나 attribute 등을 사용합니다.

4번 라인 : child elemnet를 사용합니다. 

const objElement = React.createElement(
    'h1',
    {className: 'obj'},
    'OBJ Element'
)

 

● 4. 두 개의 방법을 비교하면 아무래도 JSX 쪽이 다방면으로 좋습니다. 성능도 더 우수합니다. 그래도 결과 값은 같습니다. 

 

● 5. 짧은 내용을 담을 때는 그래도 덜 복잡하지만 내용이 많아질수록 JSX를 사용하는 것이 유지보수 측면에서도 유리합니다. 합리적인 개발을 위해 JSX를 사용하는 것을 추천합니다. 코드펜으로 오늘 실습한 내용을 만나보세요. 

https://codepen.io/gocoder-net/pen/ZEpNbMX

See the Pen JSX와 createElement 사용법 비교 by GoCoder (@gocoder-net) on CodePen.

 

 

 

---

마무리

---

 

JSX는 개발자에게 축복입니다.