1. React Router:

• React 애플리케이션에서 라우팅을 관리하는 데 사용되는 라이브러리

• 여러 개의 페이지로 구성된 웹 애플리케이션에서 URL과 UI를 동기화하고, 경로에 따라 적절한 컴포넌트를 렌더링할 수 있게 해준다.

• 예를 들어, 사용자가 특정 경로로 이동하면 해당 경로에 매핑된 컴포넌트를 표시할 수 있다.

npm install react-router-dom

2. Redux:

• React 애플리케이션에서 상태 관리를 위한 예측 가능한 상태 컨테이너를 구축하는 데 사용되는 라이브러리

• 애플리케이션의 모든 상태는 단일 저장소에 저장되며, 상태의 변화를 예측 가능한 방식으로 관리할 수 있다.

• 컴포넌트 간의 데이터 공유와 상태 변경을 간단하게 만들어주며, 중앙 집중화된 상태 관리를 통해 애플리케이션의 복잡성을 줄여준다.

npm install redux react-redux

3. Axios:

• JavaScript에서 사용되는 HTTP 클라이언트 라이브러리로, React 애플리케이션에서 서버와의 API 통신을 쉽게 처리할 수 있도록 도와준다.

• 다양한 HTTP 요청 메서드(GET, POST, PUT, DELETE 등)를 지원하며, 프로미스 기반 API를 제공하여 비동기 작업을 처리할 수 있다.

• 데이터를 가져오거나 서버로 데이터를 보내는 데 사용할 수 있다.

npm install axios

4. Styled Components:

• Styled Components는 CSS-in-JS 라이브러리로, React 컴포넌트에 스타일을 적용하는 데 사용된다.

• JavaScript 코드 안에서 CSS 스타일링을 작성할 수 있으며, 스타일 컴포넌트로 스타일을 정의하여 컴포넌트의 스타일링을 관리할 수 있다.

• 이는 컴포넌트 단위로 스타일을 캡슐화하여 재사용성과 유지 보수성을 높여준다.

npm install styled-components

5. React-Bootstrap:

• React-Bootstrap은 Bootstrap 프레임워크를 React 애플리케이션에서 사용할 수 있도록 해주는 라이브러리

• Bootstrap은 반응형 웹 디자인을 위한 HTML, CSS, JavaScript로 구성된 프론트엔드 프레임워크.

• React-Bootstrap은 사전 스타일링된 Bootstrap 컴포넌트를 React 컴포넌트로 래핑하여 사용할 수 있게 해준다. 이를 통해 빠르고 반응형의 사용자 인터페이스를 구축할 수 있다.

npm install react-bootstrap bootstrap

6. React Helmet:

• React Helmet은 React 애플리케이션에서 헤드 태그를 동적으로 관리하는 데 사용되는 라이브러리

• 헤드 태그는 웹 페이지의 메타데이터, 스타일 시트, 스크립트 등을 정의하는 역할을 한다.

• React Helmet을 사용하면 페이지의 헤드 태그를 컴포넌트 내부에서 변경하고 조작할 수 있으며, 동적으로 페이지의 제목, 메타 태그, 스타일 시트 등을 설정할 수 있다.

npm install react-helmet-async

7. React Query:

• React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 데 사용되는 라이브러리

• React Query를 사용하면 API 요청을 관리하고, 데이터를 캐싱하며, 자동 리로딩을 처리하고, 오류를 처리할 수 있다.

• 이를 통해 애플리케이션의 데이터 통신을 효율적으로 관리하고, 사용자에게 빠른 응답 속도와 부드러운 사용자 경험을 제공할 수 있다.

npm install react-query