FrontEnd

[React] CRA(create-react-app) 사용하지 않고 초기 세팅 해보기

mingg123 2022. 5. 8. 23:07

CRA를 이용하면 초기 세팅을 직접 하지 않고도 어플리케이션을 만들 수 있다. 

 

오늘은 그것을 사용하지 않고 초기에 세팅해보는 방법에 대해 알아보도록 하겠다.

 

간단하게 hello-world라는 디렉토리를 만든다.

우선 이름을 보고 판단할 수 있듯이 react-dom.development, react.development는 개발 환경에서 사용되는 파일이고, 

react-dom.production.min.js, react.production.min.js 는 배포에 필요한 환경 파일임. 

 

파일 상세내용은 git 에 올려놓도록 하겠음. 

 

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>

 

simple1.js

function LikedButton() {
  const [liked, setLiked] = React.useState(false);
  const text = liked ? '좋아요 취소' : '좋아요';
  return React.createElement(
    'button',
    { onClick: () => setLiked(!liked) },
    text
  );
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(React.createElement(LikedButton), domContainer);

domContainer는 html 파일에서 만들어두었던 돔 요소를 가져온다. 

마지막 줄 같은 경우에는 react-dom.development.js 파일에서 전역 변수로 만든 ReactDOM 변수를 사용해서 우리가 만든 컴포넌트를 REact-root 돔 요소에 붙임. 

 

html 파일을 열어보면 확인할 수 있다. 

 

바벨 사용해보기 

바벨은 자바 스크립트 코드를 변환해주는 컴파일러임. 즉 브라우저가 ES6 문법을 지원하고 있지 않을 경우에 ES5 문법으로 변환해주는 역할임. 

 

다른 용도로는 코드에서 주석을 제거하거나 코드를 압축하는 용도로 사용할 수 있다. 

리액트에서 JSX 문법을 사용하기 위해 바벨을 사용한다. 바벨이 JSX 문법으로 작성된 코드를 createElement 함수를 호출해주는 코드로 변환해준다.