자주 설치할 리액트 기능들

1. 리액트 라우터

npm install react-router-dom

혹시몰라서 yarn도 추가

yarn add react-router-dom

입력 후 설치/ 사용할곳에 import해오기

import { BrowserRouter, Routes, Route } from 'react-router-dom';

BrowserRouter 태그로 App감싸주거나 App 안에서 최상위태그 감싸주고나서 사용하기,

2. 폰트어썸

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

3개 설치 / import 제대로해오기

사용할 곳 상단에 import

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faBars } from "@fortawesome/free-solid-svg-icons"

예시로 faBars 로 햄버거를 import 해온거
폰트어썸 홈페이지에서 solid인 아이콘만 가져와서 넣어주기
사용방법은

<FontAwesomeIcon className="Header_icon" icon={faBars}/>

폰트어썸아이콘 태그안에 아이콘속성에 추가해주면 됨
3. 페이지네이션

npm install react-js-pagination
설치 후 사용하기

사용할 곳 최상단에 import

import Pagination from 'react-js-pagination'

해온 뒤

<Pagination 
activePage={1}
// 현재 보고있는 페이지

itemsCountPerPage={5}
// 한 페이지에 보여줄 아이템 갯수

totalItemsCount={100}
// 총 아이템

pageRangeDisplayed={5}
// 표시할 페이지 수
/>

기타 등등 옵션은 구글링

4. 리덕스 툴킷

npm install @reduxjs/toolkit react-redux
터미널 입력 후 설치

store.js파일 src폴더안에 만들어주기

store.js파일 세팅

(store.js)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
	reducer: {  }
})

입력 후 저장

index.js가서 리덕스 세팅마무리하기

상단에 import해오기

import { Provider } from 'react-redux';
import store from './store';

<React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>

import 해온걸로 App태그 감싸주기

5. styled-components

npm install styled-components
설치해주면 끝

사용할곳에서 return밖에

const 사용할이름 = styled.div`css작성`