이재승님의 실전 리액트 프로그래밍이란 책을 보고있는데
프로젝트때 마다 cra를 사용해서 프로그램을 구축했었는데 cra 없이 직접 구축하는 내용이 있어서 정리 해보려한다.
구축하기
파일 만들기
우선 폴더 하나를 만들고 그 안에 아래의 네개 파일을 저장한다
https://unpkg.com/react@16.14.0/umd/react.development.js
https://unpkg.com/react@16.14.0/umd/react.production.min.js
https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js
https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js
1, 3번은 개발환경(development)
2, 4번은 배포환경이다(production)
다음으로 html, js파일을 하나씩 만들어 준다
바벨 없이 코드 작성
다음 아래처럼 코드를 작성한다
simple1.html
<html>
<body>
<h2>cra 없이 만든 조아요 페이지</h2>
<!-- react 생성할 때 사용할 돔요소, 여기 안에다가 새로운 돔 생성함 -->
<div id="react-root"></div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<!-- 여기에 react 코드 작성함 -->
<script src="simple1.js"></script>
</body>
</html>📌 react-root에는 렌더링 할때 사용할 돔 요소이다
simple1.js
function LikeButton() {
const [liked, setLiked] = React.useState(false);
const text = liked ? "좋아요 취소" : "좋아요";
return React.createElement(
"button",
{ onClick: () => setLiked(!liked) },
text
);
}
const domContainer = document.querySelector("#react-root"); // 돔 요소 가져옴
// react-dom.development.js 파일에서 ReactDOM 변수 이용
ReactDOM.render(React.createElement(LikeButton), domContainer);📌 document.querySelector()로 돔 요소를 가져온 뒤에 createElement()로 만든 컴포넌트를 ReactDOM.render()로 돔요소에 붙힌다
위 페이지를 브라우저에 띄우면 아래처럼 나온다
❗️jsx 문법 없이 코드 짜려니까 너무 불편하다
