[리액트프로젝트 시작하기] 2. 필요한 모듈 및 설정하기.

지난 시간에 로컬 pc에서 개발하고 배포 서버에 배포하는 설정까지 했다. 이제 내가 주로 쓰는 라이브러리들을 기록 해둔다.

내가 주로 사용하는 라이브러리

• npm i react-router-dom      [페이지 이동을 위한 라우터 라이브러리]
• npm install @reduxjs/toolkit react-redux [상태관리 라이브러리]
• npm install axios              [비동기 api 요청을 위한 라이브러리]
• npm install @loadable/component 
• npm install --save react-toastify 아이디, 비밀번호 틀렸을때나 알림이 필요할때 사용.
• npm install react-icons --save  //아이콘 사용을 위해

npm install qs

react-router-dom v6이상을 사용하면, qs라이브러리 대체가능
import React from 'react'
import {YearEndContainer} from '../../containers';
import { useSearchParams } from 'react-router-dom';

function YearEndPage() {

    const [searchParams] = useSearchParams();
    const key = searchParams.get('key');
    
    return (
        <YearEndContainer key={key}></YearEndContainer>
    )
}

export default YearEndPage;

@loadable/component

https://medium.com/greendatakr/loadable-components-881e936aa8fa

Loadable Components

:: 코드 스플리팅

Loadable Components는 코드 분할을 편하게 하도록 도와주는 서드파티 라이브러리이다.

가장 큰 장점은 서버 사이드 렌더링을 지원한다!!

렌더링 하기 전에 필요할 때 분할된 파일을 미리 불러올 수 있는 기능도 있다.

 

서버사이드 렌더링이 필요할때 써야함.