React로 빌드할 때 알아야 할 라이브러리-JS 튜토리얼-php.cn

React로 빌드할 때 알아야 할 라이브러리

DDD

풀어 주다： 2024-10-21 06:22:30

원래의

787명이 탐색했습니다.

Libraries You Should Know When Building with React

이 글에서는 React 프로젝트에서 사용할 수 있는 라이브러리에 대해 이야기하겠습니다.

제 글이 마음에 드셨다면 커피 한잔 사주시면 됩니다 :)
커피 사주세요

1. 스타일이 지정된 구성 요소

React 애플리케이션에서 CSS 작성 컴포넌트 기반을 만들어주는 라이브러리입니다. 컴포넌트 기반 구조를 갖고 있기 때문에 각 컴포넌트를 개별적으로, 모듈 방식으로 스타일을 지정할 수 있습니다. 다이나믹한 스타일링, 테마 전환 등의 기능도 제공합니다.

설치

npm i 스타일 구성요소
실 스타일 구성요소 추가

2. 포믹 - 응

Formik은 양식 유효성 검사, 양식 제출 작업, formik 상태 관리 등의 작업에 탁월한 편의성을 제공합니다. 이는 특히 크고 복잡한 양식으로 작업할 때 오류 관리 및 검증 프로세스를 단순화합니다.

설치

npm i formik
실 추가 formik

3. 탄스택 쿼리

데이터 변경사항을 자동으로 관리하고 업데이트합니다. 데이터를 캐시하여 재사용 가능하게 만듭니다. 캐싱을 통해 성능을 높이고 불필요한 네트워크 요청을 줄입니다. 애플리케이션은 백그라운드에서 자동으로 데이터를 업데이트할 수 있습니다. 사용자 인터페이스에 최신 데이터를 제공합니다. 동적이며 최신의 데이터를 제공하여 사용자 경험을 향상시킵니다. 동적 URL 또는 매개변수를 통해 데이터를 검색합니다. 대상 데이터 검색을 통해 필요한 데이터만 캡처되도록 보장합니다. 테스트 시나리오를 더 쉽게 만들 수 있습니다. 데이터 상태를 확인하고 시뮬레이션하는 강력한 기능을 제공합니다. 오류를 관리하고 사용자에게 의미 있는 오류 메시지를 표시하는 유용한 메커니즘을 제공합니다. 오류 발생 시 재시도 옵션을 제공합니다.

설치

npm i @tanstack/react-query
yarn add @tanstack/react-query

4. 몰입

Immutable은 상태 업데이트를 용이하게 하는 라이브러리입니다. 이를 통해 상태 업데이트를 변경 없이 기능적으로 쉽게 변경할 수 있습니다. Redux와 같은 상태 관리 도구와 함께 사용하면 불변 상태 구조를 더욱 명확하고 이해하기 쉽게 업데이트할 수 있습니다.

설치

npm i immer
실에 이머 추가

5. 리액트 스프링

애플리케이션에서 애니메이션 및 전환을 생성하는 데 사용되는 라이브러리입니다. 특히 애니메이션과 동적 상호작용을 추가하려는 프로젝트에서 널리 사용됩니다.

설치

npm i 반응-봄
원사 @react-spring/web 추가

6. 가상화된 반응

성능 문제 없이 대규모 데이터 세트로 작업할 수 있습니다. 보이는 요소만 렌더링

하여 불필요한 렌더링 작업을 방지합니다.

설치

npm i 반응 가상화
실 추가 반응 가상화

7. DnD에 반응하다

드래그 앤 드롭과 같은 동적 상호 작용을 사용자 인터페이스에 추가하기 위한 강력한 라이브러리입니다. 복잡한 드래그 앤 드롭 작업도 쉽게 구현할 수 있습니다.

설치

npm i 반응-dnd
실 추가 반응 드래그 앤 드롭

8. 프레이머 모션

Framer Motion은 애니메이션을 만드는 데 사용할 수 있는 최신 라이브러리입니다. React와 호환되는 애니메이션을 쉽게 추가하고 관리할 수 있습니다. 간단한 모션 효과부터 복잡한 애니메이션까지 모든 것을 쉽게 적용할 수 있습니다.

설치

npm i 프레이머-모션
원사 프레이머 모션 추가

9. 농담

Jest는 JavaScript 및 React 프로젝트를 위한 테스트 도구를 제공합니다.

설치

npm install--save-dev 반응-테스트-렌더러
yarn add--dev 반응-테스트-렌더러

10. 스토리북

격리된 환경에서 React 구성요소를 테스트하는 도구입니다. 이는 구성요소 개발 및 테스트 프로세스를 더욱 효율적으로 만듭니다. 이를 사용하여 다양한 사용자 인터페이스 상태를 테스트하고 구성 요소의 기능을 시각화할 수 있습니다.

설치

npm i @storybook/react
yarn @storybook/react 추가

11. i18next 반응

React 프로젝트에서 다국어 애플리케이션을 개발하는 데 사용됩니다. i18next와 통합되어 작동하며 언어 변경 작업을 용이하게 합니다. 동적 언어 변경 작업을 쉽게 수행할 수 있습니다.

설치

npm i 반응-i18next
실 추가 i18next-react

12. Redux 툴킷

Redux Toolkit은 React의 전역 상태 관리 프로젝트를 더 쉽고 효율적으로 만들어주는 도구입니다. Redux의 복잡한 구조를 단순화하여 애플리케이션 내 데이터 흐름을 관리하는 데 도움이 됩니다. 크고 복잡한 프로젝트에서도 데이터 관리 및 데이터 업데이트를 위한 명확한 구조를 제공합니다. 또한 고급 디버깅 및 시간 이동 디버깅 기능을 제공하는 Redux DevTools와 함께 사용됩니다.

설치

npm install @reduxjs/toolkit
원사 추가 @reduxjs/toolkit

13. 액시오스

React 애플리케이션에서 외부 리소스(API, 백엔드 등)로 데이터를 주고받는 과정을 관리합니다. Promise 기반 ** 구조는 **async/await 및 then/catch 구조와 함께 쉽게 사용할 수 있습니다. 또한 요청 시간 초과, 자동 변환, 전역 구성과 같은 기능도 제공합니다.

설치