JSX란?
리액트를 이용하는 개발자님들에게 여쭤보고 싶습니다.
정확히 JSX 가 뭘까요?
솔직히 말하면 저는 JSX 라는 개념을 모호하게 알고 있었던 것 같습니다.
그냥 리액트에서 사용하는 엘리먼트를 표현하는 문법? 딱 이정도로 가볍게 생각하고 있었습니다.
리액트 공식문서 초반부를 읽다가 이에 대해 다뤄보면 좋을 것 같았습니다.
자세한 내용은 글 뒷부분에 공개됩니다!
리액트 시작하기
React 공식문서의 도입부는 html 에서 React 를 어떻게 도입하는지에 대해 설명해줍니다.
https://ko.reactjs.org/docs/add-react-to-a-website.html
저는 리액트의 시작을 create-react-web 으로 접해서 뭐가뭔지 잘 몰랐던 경험이 있었고, 그렇기에 또한 babel 과 webpack 을 이용해서 직접 react 개발 환경을 꾸려간 적도 있었습니다. (crw 없이 빌드하기)
crw 만을 이용해본 사람은 리액트가 결론적으로 <div> 태그 DOM 을 건드려 그 <div> 태그 안에다가 엘리먼트들을 쏴주는 것이라는 사실을 잘 모를 수 있죠. 이 부분을 읽으시면 도움이 많이 될 것 같습니다.
<!-- ... 다른 HTML ... -->
<!-- React를 실행. -->
<!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 만든 React 컴포넌트를 실행. -->
<script src="like_button.js"></script>
</body>html 파일에 script 형태로 react 와 react-dom 을 넣어주는 코드입니다.
우리가 흔히 쓰는
import React from "React"
이 것의 시초라고 할 수 있겠죠.
종종 오픈 톡방에서 리액트를 하나의 언어로 생각하는 분을 볼 수 있는데, 리액트는 결국 자바스크립트입니다!
위에 보이시는 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
이 한줄이 결국 리액트를 이용하게끔 해주는 자바스크립트 로 이루어진 리액트입니다.
리액트의 개발 과정 글을 본적이 있는데 깊게 들어가면 엄청 또 깊어지더라구요, 저희는 자바스크립트를 편하게 쓸 수 있게 해주는 프레임워크 정도로 생각하면 좋을 것 같네요!
관심이 있으신 분들은 이 링크를 참고해보시면 좋을 것 같습니다. (JS로 리액트 직접 만들기)
JSX 가 없어도 리액트를 사용할 수 있다!
그 다음 내용으로 이제 이번 글의 핵심 내용이 나옵니다.
JSX 가 없는 리액트를 쓰는 방법이죠! 정확히 말하자면 리액트는 원래 JSX로 사용하는 것이 아니고, 단지 JSX가 리액트를 편하게 쓰게 끔 해주는 Syntax Sugar였던 것입니다. 'react = JSX 를 사용한다' 라는 제 잘못된 고정관념을 무너트려 주었네요.
일반적으로 쓰는 JSX 문법
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
ReactDOM.render(
<Hello toWhat="World" />,
document.getElementById('root')
);Javascript 문법
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
React.createElement(태그이름, props들, child 엘리먼트)
이걸로 모든 JSX 들이 표현이 가능한 것입니다.
자세한 내용은 여기를 확인해보세요!
https://ko.reactjs.org/docs/react-without-jsx.html
JSX 없이 사용하는 React – React
A JavaScript library for building user interfaces
ko.reactjs.org
JSX가 가능한 이유
조금 전 내용에서 JSX 가 단지 Syntax Sugar에 불과하다는 사실을 알았으니, 공식문서에서는 어떻게 JSX를 자유롭게 쓸 수 있는지를 알려줍니다. 바로 Babel 입니다!! Babel은 js 의 다양한 Syntax Sugar들, 혹은 버전이 달라 맞지 않은 경우를 대비해서 문법에 맞게끔 바꿔줍니다! Babel에 대해 잘 모르신다면 요기 를 참고해주세요.
아무튼 Babel은 다음과 같은 <script>를 집어넣어서 사용이 가능합니다.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
그러면 이제 어떤 <script> 태그에서든 type="text/babel"성질을 추가하면 JSX를 사용할 수 있답니다!
공식문서에서는 다음과 같은 예시 코드도 제공해주네요!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
Read this section for a production-ready setup with JSX:
https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
In a larger project, you can use an integrated toolchain that includes JSX instead:
https://reactjs.org/docs/create-a-new-react-app.html
You can also use React without JSX, in which case you can remove Babel:
https://reactjs.org/docs/react-without-jsx.html
-->
</body>
</html>
근데 제 경험상 이런 방법은 잘 쓰지 않습니다. 보통 node js 를 이용해 babel 모듈을 설치하죠!
프로젝트 자체에 babel 모듈을 npm install 해도 되고, 전역적으로 직접 바꿔주는 방법도 있습니다.
진짜 자세한 내용은 Babel 공식문서를 참고합시다!
1편 끝!
아직 도입부분인데도 직접 읽어보니 제가 애매하게 알고있던 사실들이 다 탄로나네요ㅠ 많이 배웠습니다! 그런 만큼 이 시리즈를 쓰기를 잘했다는 생각이 듭니다. 이미 당연하게끔 여기고 계신분들도 많으시겠지만 그런 분들은 머릿속으로 한번 더 되짚어볼 수 있고, 저 같이 얕게 아시던분들은 새롭게 알게되어 모두 도움이 됐으면 좋겠습니다!😙
| 리액트 공식문서 함께 읽기 📘 |
2020/08/24 - [컴퓨터 지식/생각해 볼만한 것] - [개발일기] 한 단계 더 도약하자 / 리액트 공식문서 함께 읽기 0️⃣ - 도입
* 출처 및 참고 : 리액트 공식 문서 https://ko.reactjs.org/
* 제가 직접 읽고 느낀 생각을 글로 쓰는 것이기에, 잘못된 내용이 있을 수 있습니다. 피드백과 지적은 언제나 환영합니다!
'Web > React' 카테고리의 다른 글
| [React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기 (0) | 2020.08.29 |
|---|---|
| [React🌌] 리액트 공식문서 함께 읽기 📘 / 2️⃣ - 리액트를 사용하는 여러 방식 / (0) | 2020.08.28 |
| [React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding (1) | 2020.08.17 |
| [React🌌] React + Ant Design + TypeScript 적용하기! / antd 사용 (1) | 2020.07.30 |
| [React] 마우스 비밀번호 입력기🖱 / 키보드 보안 입력기 / 2차 비밀번호 (0) | 2020.07.20 |
댓글