[React] 📚 리액트 프로젝트 개발 환경 설정

pyeonne·2022년 6월 13일

React 제로베이스

제로베이스 프론트엔드 스쿨 4기

목록 보기

11/25

📋 기억하고 싶은 내용

📌 Javascript 프로젝트에 React 추가하는 방법

React는 처음부터 점진적으로 도입할 수 있게 설계되었고, 필요한 만큼만 사용하면 된다.

빌드 도구 없이 몇 줄의 코드만으로 React를 도입할 수 있다.

HTML 파일에 DOM 컨테이너 설치하기

<div id="like_button_container"></div>

React와 React DOM을 불러오는 script 태그 추가하기

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

React 컴포넌트 파일을 만들어 script 태그로 불러오기

<script src="like_button.js"></script>

React.createElement()

document.createElement(tagName[, options]) 함수는 지정한 tagName의 HTML 요소를 만들어 반환하고, React.createElement(component, props, ...children) 함수는 ReactElement를 반환한다.
첫 번째 인자인 component에는 문자열 또는 리액트 컴포넌트를 넣을 수 있다.
- 문자열일 때는 HTML 태그를 의미한다.
두 번째 인자인 props에는 compoenent가 가질 수 있는 옵션을 객체의 형태로 넣을 수 있다.
- 예) style, calssName 등
세 번째 인자에는 compoenent가 감싸고 있는 내부 컴포넌트를 넣을 수 있다.
- 텍스트
- 리액트 컴포넌트
  - React.createElement() 함수로 만든 컴포넌트

ReactDOM.render()

ReactElement를 루트의 DOM 노드에 렌더링 하기 위해서 사용한다.
React DOM은 ReactElement와 일치하도록 DOM을 업데이트한다.

📌 CRA

Node 14.0.0 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다.

npx create-react-app my-app
cd my-app
npm start

📌 CRA 없이 React 앱 만드는 방법

Bable이 JSX를 Javascript로 트랜스파일링 해주는 것을 직접 확인해보자 !

react, react-dom 설정

npm init --y
npm i react react-dom

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

import React from "react";
import ReactDOM from "react-dom";

const domContainer = document.querySelector("#root");

Babel 설정

npm i -D @babel/core @babel/cli @babel/preset-react @bable/preset-env

@babel/preset-react 패키지는 React와 관련된 코드를 컴파일 해준다.
@babel/cli 패키지는 터미널 명령어를 통해 Babel을 적용시킬 수 있도록 도와준다.
@babel/core 패키지는 Babel을 사용하기 위해 필수적으로 설치해야 한다.
-D 옵션은 devDependencies에 설치한다.
preset은 굉장히 다양한데, 매번 적용할 preset을 모두 작성하는 것은 번거롭다. 그래서 babel.config.js라는 별도의 파일을 만들어 Babel에 관련된 설정을 하는 것이 일반적이다.

babel.confing.js

module.exports = function (api) {
  api.cache(true);

  const presets = ["@babel/preset-env", "@babel/preset-react"];
  const plugins = [];

  return {
    presets,
    plugins,
  };
};

npx babel {파일명}

Webpack 설정

Webpack은 번들러(Bundler)를 의미하는데, 번들러는 분리된 Javascript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합한다.

npm i -D webpack webpack-cli html-webpack-plugin babel-loader

html-webpack-plugin은 bundle.js를 index.html에 적용해 최종적인 html 파일로 만들어 주는 역할을 한다.

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
  optimization: { minimizer: [] },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

HMR 설정

Hot Module Replacement(HMR)은 모듈 전체를 다시 로드하지 않고, 애플리케이션이 실행되는 동안 변경해도 즉시 업데이트된다.

npm i -D  webpack-dev-server

webpack.config.js

...
  devServer: {
    static: "./dist",
    hot: true,
  },
};

npx webpack serve

🌝 수강한 소감 & 떠오르는 생각

babel과 webpack을 설정할 때 왜 이런 옵션들을 주는지 헷갈렸는데, 이번 강의를 통해서 확실하게 이해하고 넘어갈 수 있었다. 낯설어서 어렵게 다가왔을 뿐 이해하고 나니 그렇게 어려운 내용은 아니었다.

🔗 참고 래퍼런스

pyeonne

건강한 몸과 마음에서 건강한 코드가 태어난다 !

이전 포스트

[React] 📚 리액트에 대한 이해

다음 포스트

[React] 📚 리액트 프로젝트 개발 환경 설정

제로베이스 프론트엔드 스쿨 4기

📋 기억하고 싶은 내용

📌 Javascript 프로젝트에 React 추가하는 방법

React.createElement()

ReactDOM.render()

📌 CRA

📌 CRA 없이 React 앱 만드는 방법

react, react-dom 설정

Babel 설정

Webpack 설정

HMR 설정

🌝 수강한 소감 & 떠오르는 생각

🔗 참고 래퍼런스

[React] 📚 리액트에 대한 이해

[React] 📚 리액트 기본 문법과 컴포넌트 소개

0개의 댓글