React
webpack을 통해 React 환경을 직접 구성해 보려고 한다.
React 설치
npm install react react-domReact 기본 설정
React 기본 설정을 해보자
우선 root > public 경로에 토대가 되는 index.html 파일을 생성한다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
// 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부릅니다.
<div id="root"></div>
</body>
</html> body 태그 안에 있는 <div id="root"></div>를 기준으로 React의 랜더링이 실행된다.
그 후root > src 경로에 index.jsx파일을 생성한다.
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root"));
const element = <h1>Hello, world</h1>;
root.render(element);React 엘리먼트를 렌더링 하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, React 엘리먼트를 root.render()에 전달해야 합니다.
webpack 설정
위에서 한 설정만으로는 제대로된 실행이 되지 않을 것이다. 왜냐하면 entry-point가 index.jsx로 설정이 안되어있기 때문에 webpack이 바뀐 시작점을 인식 할 수 없다. 게다가 .jsx파일도 인식하지 못한다.
추가적인 설정을 통해 해결해 보자.
우선 entry-point를 index.jsx로 바꾸자.
// webpack.config.js
// ...
module.exports = {
// ...
entry: {
main: "./src/index.jsx",
},
// ...
}기존에 ./src/app.js였던 entry-point를 ./src/index.jsx로 변경하자.
다음은 .jsx파일을 인식하게 해보자.
기존의 babel-loader 설정은 .js 파일만 인식 할 수 있었기 때문에 .jsx파일도 인식할 수 있도록 추가한다.
// webpack.config.js
// ...
module.exports = {
// ...
module: {
rules: [
{
test: /\.(js|jsx)$/i,
exclude: /node_modules/,
loader: "babel-loader",
},
],
},
// ...
}기존에 /\.js$/i였던 정규식을 /\.(js|jsx)$/i로 변경하자.
babel 설정
추가적으로 React 에 맞는 babel 설정을 하기 위해 @babel/preset-react 을 설치한다.
npm install -D @babel/preset-reactbabel.config.js 파일에 preset을 추가한다.
// babel.config.js
module.exports = {
["@babel/preset-react", { runtime: "automatic" }],
};- runtime
automatic으로 설정시import React from "react"구문을 생략 할 수 있다.
ESLint 설정
React를 추가했으니 그에 맞게 ESLint 설정도 추가해보자.
plugin 설치
npm install -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y- eslint-plugin-react
- React 관련 규칙을 제공하는 플러그인
- JSX 구문과 관련된 규칙을 포함하며, React 컴포넌트 사용의 일관성과 오류 방지를 지원
- eslint-plugin-react-hooks :
- React Hooks 관련 규칙을 제공하는 플러그인
- Hooks를 올바르게 사용하고 종속성 배열(dependency array)을 적절하게 설정하는지 검사하여 오류를 방지
- eslint-plugin-jsx-a11y
- 장애를 가진 사용자들도 웹을 이용할 수 있도록 도와주는 웹 접근성에 대한 가이드를 제공해주는 플러그인
- 웹 접근성을 개선하기 위해 JSX 요소에 대한 접근성 검사를 수행
.eslintrc.js 설정
// .eslintrc.js
module.exports = {
// ...
extends: [
"eslint:recommended",
"eslint-config-prettier",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
plugins: ["prettier", "react", "react-hooks", "jsx-a11y"],
parserOptions: {
// ECMScript 규격의 JSX 사용 여부
ecmaFeatures: {
jsx: true,
},
// ...
},
rules: {
// ...
// import React from "react" 구문을 사용하지 않아도 경고를 표시하지 않는다.
"react/react-in-jsx-scope": "off",
},
};React Router 설정
React-router-dom을 사용하여 라우팅 설정을 해보자
설치
npm install react-router-domApp.jsx 작성
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "@/components/Home/Home";
import Profile from "@/components/Profile/Profile";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</BrowserRouter>
);
}
export default App;- BrowserRouter
- 브라우저 History API를 사용해 현재 위치의 URL을 저장하고 탐색할 수 있게 만들어준다.
- 단일 자식 컴포넌트만 렌더링 할 수 있다.
- Routes
- URL이 변경될 때 모든 자식 경로를 살펴보고 가장 일치하는 항목을 찾아 해당 Route를 렌더링 한다..
- Route
- Route는 중첩해서 사용할 수 있습니다. 이를 통해 중첩 라우팅(nested routing)을 구현할 수 있다.
path속성에는 원하는 경로를 작성하면 된다.- Route는 위에서 아래로 순차적인 우선순위를 가지며, 첫 번째로 매칭되는 경로에 대한 컴포넌트가 렌더링된다.
path="*"로 설정하면 설정한 경로 이외의 모든 경로에 대한 결과를 제공합니다. 주로 404 페이지 등에 사용된다.- 동적 라우팅을 구현하려면
/:id와 같이 경로에:를 붙여서 동적인 부분을 나타낼 수 있다. elemet속성에 렌더링할 컴포넌트를 지정할 수 있다.
