[React] React 설정 및 유용한 기능
[Node.js]
Node.js는 브라우저 밖에서도 Javascript를 실행할 수 있게 해주는 런타임 환경이다.
크롬 v8 기반으로 동작하며 Single-Thread의 non-blocking I/O 이벤트 기반으로 동작한다.
아래 URL을 통해 Node.js를 설치할 수 있다.
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
[NPM ( Node Packege Manager )]
Javascript를 위한 패키지 관리자로 공개된 Javascript 라이브러리들을 쉽게 설치해 사용할 수 있다.
[React 파일 생성하기]
1. Create-react-app(CRA)를 사용하여 프로젝트 생성
vsCode 터미널에서 해당 명령어를 실행시켜 react project를 생성한다.
npx create-react-app 프로젝트명2. 생성한 프로젝트 실행
기본 port는 3000번
npm run start
3. 실행 종료
Ctrl + c생성된 프로젝트 파일 설명
- node_modules/: npm install을 실행하면 생성되는 폴더로, 프로젝트에서 사용하는 외부 라이브러리들이 저장됩니다.
- public/: 보통 정적 파일(이미지, HTML, CSS 등)이 위치하는 폴더입니다. React 같은 프레임워크에서는 index.html 파일이 이곳에 있을 수 있습니다.
- src/: 프로젝트의 주요 소스 코드가 위치하는 폴더입니다. JavaScript, TypeScript, React, Express 등의 코드가 포함될 수 있습니다.
- .gitignore: Git에서 추적하지 않을 파일 목록을 지정하는 파일입니다. 일반적으로 node_modules/나 환경 변수 파일(.env) 등이 포함됩니다.
- package.json: 프로젝트의 기본 설정 파일입니다. 의존성 목록, 스크립트 명령어, 프로젝트 이름 및 버전 등의 정보가 포함됩니다.
- package-lock.json: 프로젝트의 의존성 버전을 고정하는 파일입니다. npm install을 실행할 때 의존성이 정확히 동일한 버전으로 설치되도록 합니다.
- README.md: 프로젝트의 설명 및 사용 방법이 적힌 문서입니다. 보통 GitHub에서 프로젝트를 설명하는 데 사용됩니다.
[eslint]
자바스크립트는 컴파일이 없기 때문에 직접 실행하지 않으면 오류를 찾기 어렵다. 이런 문제점을 보완 해주기 위해 나온 게 eslint 문법 및 코드 스타일을 검사해 주는 코드로 문법적인 오류를 사전에 발견할 수 있고 협업에서 통일된 코드 스타일을 유지할 수 있도록 도와준다. CRA에는 자체 내장되어 있다. ( package.json의 eslintConfig )
[prettier]
자동으로 코드를 정해진 규칙에 맞게 고쳐주는 툴
설치
상단에 File-> Preferences -> Settings 선택 다운받은 prettier 선택 -> Format On Save 선택
Format On Save는 소스코드에서 Ctrl + c로 저장을 하면 자동으로 불필요한 공백등을 제거해
prettier 설정
prettier의 규칙을 직접 설정할 수 있다.
.prettierrc.json 파일을 생성해준다.
아래와 같이 자신이 원하는 규칙을 직접 설정해서 사용 가능.
{
"singleQuote" : true,
"semi" : true,
"tabWidth":2,
"trailingComma": "all"
}[eslint-plugin-simple-import-sort]
eslint-plugin-simple-import-sort는 ESLint 플러그인으로, JavaScript 및 TypeScript 코드에서 import와 export 문을 자동으로 정렬하여 코드의 일관성과 가독성을 높여줍니다.
TERMINAL에 npm으로 설치 -> PACKAGE 파일에서 아래 소스 추가
- 설치
npm install --save-dev eslint-plugin-simple-import-sort- package 추가
"plugins": [
"simple-import-sort"
],
"rules": {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
}
- Settings 설정
설정 -> code actions 검색 -> Editor: Code Actions On Save에 Edit in Settings.json 클릭 ->
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}전역 상태 관리
- Recoil: React 전용 전역 상태 관리 라이브러리. 간단하고 직관적인 API로 상태를 atom 단위로 나눠 관리할 수 있음.
- Redux: 예측 가능한 상태 관리를 위한 라이브러리. 복잡한 앱에서 중앙 집중식 상태 관리를 원할 때 사용. (Middleware, DevTools 등 강력한 생태계 제공)
API 연동
- useSWR: React Hook 기반의 데이터 패칭 라이브러리. 자동 리페치, 캐싱, 로딩 상태 관리 등을 지원. Stale-While-Revalidate 전략 기반으로 최신 데이터 유지에 유리.
[React Router]
- React Router: React 앱에서 URL 경로에 따라 컴포넌트를 렌더링해주는 라우팅 라이브러리. 동적 라우팅, 중첩 라우트 등 지원.
npm install react-router-dom // routing 버전 v6 기준
import { BrowserRouter } from "react-router-dom";
import { Route, Routes } from "react-router-dom";
<BrowserRouter>
<Routes>
<Route path="/" element={<PageA/>(컴포넌트)} />
<Route path="/2" element={<PageB/>(컴포넌트)} />
</Routes>
</BrowserRouter>import { Link } from "react-router-dom";
<div>PageA</div>
<div>
<Link to="/2">move to PageB</Link>
</div>[styled-components]
CSS-in-JS 방식의 스타일링 도구. 컴포넌트 단위로 스타일을 관리하며, props를 이용한 동적 스타일링도 가능.
https://styled-components.com/
설치
npm install styled-components예시
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);데이터 불변성 유지
- Immer: 불변성을 손쉽게 유지할 수 있게 해주는 라이브러리. 기존 객체를 직접 수정하는 것처럼 코딩해도 내부적으로 불변 객체를 생성.
UI 라이브러리
- Ant Design (antd): 기업용 UI 디자인 시스템 기반의 React UI 컴포넌트 라이브러리. 많은 기능을 갖춘 고급 UI 요소들을 빠르게 구현 가능.