211019 리액트 입문2

#바벨 사용하자

#바벨이란?

자바스크립트 코드를 변환해 주는 컴파일러.

바벨은 초기엔 es6->es5 로 변환하는 용도

그 후엔 코드의 주석 제거 혹은 코드 압축용으로 사용한다.

리액트에선 jsx를 createElement를 호출하는 코드로 변환하기 위해 바벨을 사용한다.

 

#리액트에선 function XXXX{

 return React.CreateElement ( ... )

}

식으로 만드는 XXXX를 컴포넌트라고 한다

 

#jsx? 는 뭐지?

<div className="box">
	<Title text="hello world" width = {200} />
	<button onClick="()=>{}">쥬아여</button>
	<a hred="/home" style={{marginTop:'10px', color:'red'}}>홈으로 </a>
</div>

이 코드는 html이 아닌 jsx문법임

return React.createElement('',null,'text')를

return <button onClick={()=> seetLiked(!liked}>{text}</button>; 로 바로 작성할 수 있게 된다.

 

이건 html + js 구나!

 

근데 위 코드는 브라우져가 해석을 못하기때문에

바벨을 돌려서 .createElement  ()... 따위로 코드를 변환시키면 된다.

 

 

1. 바벨을 설치하기 위해 npm 설치가 필요함. npm(패키지 설치관리자) -> npm 인터넷에서 받아서 설치

(node.js 기반으로 동작한다고 해서 같이 있는걸 설치했다) - npm 명령어 인식 확인. 안되면 환경변수에서 bin까지의 위치를 추가하면 될것

2.  npm으로 패키지를 관리하기 위해 npm init으로 패키지 관리 시작

3. 바벨 잘 설치하기

$  npx babel
npx: installed 1 in 3.676s
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.

    npm uninstall babel
    npm install --save-dev babel-cli

See http://babeljs.io/docs/usage/cli/ for setup instructions.

안되길래 

$npm install  babel

$npm install --save-dev @babel/core @babel/cli

 

4. 테스트 삼아 돌리기 

 $ npx babel

babel:
  stdin compilation requires either -f/--filename [filename] or --no-babelrc 

안되길래

 $ npx babel 소스경로/소스.js

 

5. 안되길래 .babelrc 파일 생성 

{
	"presets": ["@babel/preset-env", "@babel/preset-react"]
  }

 

6. Error: Cannot find module 'XXX'
Require stack:

$npm install --save-dev XXX

7.  src파일 내 소스가 변경될 때 마다 자동으로 babel 컴파일하기

npx babel --watch src --out-dir . --presets @babel/preset-react

이제 저장할때마다 jsx 가 컴파일 되어 브라우져가 읽을 수 있는 .js파일로 출력된다.

index.html 내부의 <script src="컴파일된파일.js"></script>를 잘 참조하고 있는걸 확인했다.