리액트를 사용하면서 리액트를 왜 사용하는지 자세하게 알수는 없었다.
겉핧기 식으로 사용하고 있었는데 이번 스터디를 통해서 리액트에 대해서 자세히 알아갈수 있을것 같다. 오늘은 createElement와 외부 패키지를 사용하지 않고 기능 만들기 바벨 사용해보기를 배우게 될것이다.
리액트란 무엇인가
페이스북에서 개발하고 관리하는 UI 라이브러리
가상돔을 통해서 UI를 자동으로, 빠르게 업데이트 해주는 장점
- 렌더 함수는 순수 함수로 작성해야 한다.
- 컴포넌트 상태값은 불변 객체로 관리해야 한다. (컴포넌트 상태값을 수정할때는 기존값 변경이 아니라 새로운 객체를 생성해야 한다)
외부 패키지를 활용하지 않고 버튼 기능 만들기
리액트 는 다양한 외부 패키지를 활용하면 쉽게 웹,모바일등 다룰수 있지만 리액트 웹 애플리케이션의 툴체인을 이해하기 위해서는 한번쯤 직접 구축해보는 것도 좋다고 한다.
책에서 주어지는 경로에서 리액트 자바스크립트 파일 4개를 받는다.
그리고 simple1.html 과 simple.js 파일을 만든다.
그리고 한 폴더에 넣어준다.
그러면 이렇게 된다.
폴더
(react.development.js
react.production.min.js
react-dom.development.js
react-dom.production.min.js
simple1.html
simple.js)
simple1.html 파일
<html>
<body>
<h2> 안녕하세요. 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러주세요</h2>
<div id="react-root"></div>
<script src="react.development.js/><script>
<script src="react-dom.development.js"></script>
<script src="simple1.js></script>
</body>
</html>
리액트로 랜더링 할 때react - root의 div의 요소 안쪽에 새로운 돔 요소를 추가한다.
simple1.js
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked:false};
render() {
const text= this.state.liked ? '좋아요 취소':'좋아요';
return React.createElement(
'button',{onClick:() => this.setState({liked:true})},
text,
);
}
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(React.createElement(LikeButton),domContainer);class형 컴포넌트로 작성이 되었다. 함수형을 사용하다가 오래간만에 클래스형을 쓰니 감회가 새롭다.
마지막 두줄 처럼 돔요소를 가져오고 돔요소에 붙이는 작업이 새로생겼다.
createElement 이해하기
createElement 함수의 구조는 다음과 같다.
React.createElement(component,props,...childeren) =>ReactElement
첫번째 매개 변수인 component에는 문자열이면 HTML 태그가 들어가고 해당하는 돔요소가 생성된다. p이면 p태그, div면 div태그
두번째 매개변수 props는 컴포넌트가 사용하는 데이터를 나타낸다.
style,className 등의 데이터가 사용될수 있다.
세번째 매개변수는 해당 컴포넌트가 감싸고 있는 내부의 컴포넌트를 가리킨다.
div안에 p태그 , div안에 div태그 등
<div>
<p>내용<p>
<div>
이런 식이라면
createElement('div',null, createElemnet('p',null,'내용'))
이렇게 작성될수 있다.
바벨 사용해보기
바벨은 자바스크립트 코드를 변환해 주는 컴파일러이다.
바벨을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할수 있다.
리액트에서는 jsx문법을 사용하기 위해 바벨을 사용한다.
바벨이 jsx문법을 createElement로 변환해주는 역할을 한다.
바벨을 사용하지 않으면 createElement를 계속 써야 하기 때문에 코드가 복잡해진다. 바벨이 없는 리액트는 상상도 하기 힘들다..
만일 createElement로 변환해주는 바벨의 플러그인과 프리셋이 깔려있지않다면
npm install @babel/core @babel/cli @babel/preset-react로 받을수 있다.
@babel/cli에는 커맨드 라인에서 바벨을 실행할수 있는 바이너리 파일이 들어있고 @babel/preset-react는 jsx로 작성된 코드를 변환해준다.
바벨 플러그인과 프리셋
바벨은 자바스크립트 파일을 입력받아서 또 다른 자바스크립트 파일을 출력해준다. 이때 변환해 주는 작업은 플러그인 단위로 이루어진다.
그리고 플러그인의 집합을 프리셋이라고 부른다.
웹팩
웹팩은 자바스크립트로 만든 프로그램을 배포하기 좋은 형태로 묶어 주는 툴이다.
웹팩은 ESM과 commonJs를 모두 지원한다.
이들 모듈 시스템을 이용해서 코드를 작성하고 웹팩을 실행하면 예전 버전의 브라우저에서도 동작하는 자바스크릡트 코드를 만들수 있다.
우리는 웹팩이 만들어준 자바스크립트 파일을 HTML의 script 태그에 포함시키는 것이다.
