React | JSX 코드 이해하기

🔷리액트를 다루는 기술 #3
 
 
🔵import ?

 

import logo from './logo.svg';

import './App.css';

 
특정 파일을 불러오는 역할.
리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일을 불러와 사용가능하다.
 
모듈을 불러와서 사용하는 것은 브라우저에는 없던 기능이다.
브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는기능이다.
> Node.js에서는 require구문사용.
 
이러한 기능을 브라우저에서 사용하기위해 번들러를 사용한다.
> 번들은 묶는다는 의미이며, 파일을 묶듯이 연결한다.
 
번들링
https://maymin-5tory.tistory.com/98

[React] 번들링(Bundling) 이해하기 📘

 
웹팩
https://maymin-5tory.tistory.com/97

[React] Webpack 이해하기 📘

 
대표적인 번들러로는 웹팩이 있으며, 자세한 내용은 위 포스팅에서 확인 ㅎㅅㅎ..
 
 
번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다.
또 최적화 과정에서 여러개의 파일을 분리 될 수도 있다.
 
보통 src/imdex.js 를 시작으로 
필요한 파일을 다 불러와서 번들링한다.
 
 
웹팩을 사용하면 svg파일이과 css 파일도 불러와서 사용할 수 있다.
> 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당
 
로더의 종류

• css-loader : css 파일 불러옴
• file-loader : 웹 폰트나 미디어 파일 불러옴
• babel-loader : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환
  • => 최신 자바스크립트 문법을 ES5(구버전) 으로 변환하는 것은, 구버전 웹 브라우저와 호환하기 위해서임.
  • => JSX 문법도 정식 자바스크립트 문법이 아니므로 ES5형태로 코드 변환이 필요

 
🔵JSX ?
 
JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.
브라우저에서 실행되기 전, 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
 
[변환 전]

function App(){
	return(
    	<div>
        	Hello <b>react</b>
        </dib>
    );
}

 
 
[변환 후]

fuction App() {
	return React.createElement("div",null,"Hello",React.createElement("b",null,"react"));
}

 
 
이 예시만 보아도
왜 JSX 코드를 사용하는지 알 수 있을 것이다.. ^^
 
> JSX는 리액트 프로젝트를 개발할 때 사용되기에, 공식적인 자바스크립트 문법이 아니다.
> 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다.
>> 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법을 사용할 수 있다.