[React] JSX | Babel | codeSandbox 사용법

React를 사용할 때는 JSX 문법을 사용한다. 

 

JSX 문법

React에서 사용하는 언어이다.

지금까지는 HTML, CSS, JS를 각자 파일에서 따로 코딩하였지만 JSX는 모두 모아 코딩할 수 있다. 

자바스크립트는 웹사이트에 기능을 추가하는 scripting 언어이다. 

 

 

codesandbox 사이트 

브라우저에 바로 확인하면서 볼 수 있게 codesandbox을 사용해서 코드를 작성해보자. 

간단하게 리액트를 시작할 수 있다. 

https://codesandbox.io/s/introduction-to-jsx-forked-sdjb1?file=/src/index.js 

 

index.html

 

 

1. 메뉴바에서 Fork를 눌러 깃허브와 연결한다.

또는 프로젝트 새로 만들어 html 내용을 위 처럼 채운다.

git forking: 깃허브에 호스팅된 리포지토리를 복사해서 내 깃허브로 가져옴. 이 복사본을 고침 

 

 

 

2. dependency에서 react와 reactDOM을 불러온다.

현재는 이미 설치되어 있다. 

 

 

3. 일단 React와 ReactDOM을 불러오는 코드를 작성한다. (옛날 버젼)

 

 

 

4. "Hello World" 를 리엑트 코드로 작성해 본다.

"root" : html에서  id가 "root"인 div 변경 

 

 

 

문법이 신기하다.

ReactDOM :  ReactDOM 모듈에 있는 render 메소드를 사용한다. 

 

React : JSX가 무엇을 하는지 보여준다. 

React는 이 JSX 파일들을 만드는 일을 한다. 

컴파일러인 Bable이 자바스크립트 문법 안에 있는 html 문법을 찾아서 이 부분을 다시 자바스크립트 문법으로 바꿔주는 역할을 한다. 

이 컴파일러는 React module 안에 포함되어 있다. 

React를 꺼버려면 h1은 더 이상 render 되지 않는다.

 

Bable: 자바스크립트 컴파일러. React module 안에 들어있다. 

1. ES 6, 7, 8 등 새 버젼의 자바스크립트를 낮은 버젼으로 컴파일 다운해서 오래된 브라우저에서 볼 수 있게 한다. 

2. 또한 JSX를 컴파일링해서 바닐라 자바스크립트로 만들어 주는 역할도 한다. 

https://babeljs.io/

 

 

 

5. 브라우저에서 내용이 나온 것을 볼 수 있다.

 

 

아래 코드를 html 없이 

바닐라 자바스크립트로 쓸려면 한 참 코드가 길어진다. 

나오는 결과는 같지만 위 React 코드가 훨씬 보기 편하다.

 

 

 

 

---

 

ES6 버젼 

ES6 같이 자바스크립트 높은 버젼 쓰더라고

Babel이 낮은 버젼으로 다 컴파일 다운 해주므로

걱정안하고 그냥 새 버젼 쓰면 된다.

 

1)  Import Keyword 

ES6 버젼부터 require를 쓰지 않고 import 키워드를 사용할 수 있다. 

특정 모듈이나 특정 위치에서 react를 import해서 사용할 수 있다. 

 

import, export 키 :

we're able to modularize these dependencies far better.

We end up with code that's better organized. 

 

 

 

2) <div> 태그 사용하기 

여기서 html 태그를 하나 더 넣으면 어떻게 될까?

이미 <h1> 태그가 있는데 <p>까지 넣는다면?

 

에러가 발생한다. 

 

이유는 render가 하나의 태그만 소화할 수 있기 때문이다.

 

하지만 이 2개의 태그를 한 번에 보이게 하는 방법이 있다. 

그건 큰 하나의 태그에 둘 다 <div> 태그에 집어 넣는 것이다. 

 

 

브라우저

 

---

 

연습문제 

다음처럼 만들기 

브라우저