[React]Vite, Redux

CRA란 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다.

*Esbuild: Go 언어로 작성된 JavaScript 빌드툴, 속도가 빠름

 

📌Webpack과 Vite의 차이점

개발서버

• Webpack: 소스 코드와 모든 종속 관계의 모든 번들링 후 서버가 준비된다.
• Vite: Esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동된다.

프로덕션 빌드

• Webpack: 각 모듈을 범위마다 함수로 매핑하여 결합한다.
• Vite: 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합한다. 중복을 제거하기 때문에 가볍고 빠르게 빌드할 수 있다.

 

npm init vite

⇒ 이 명령어를 통해서 프로젝트 생성하고, 옵션 하나씩 선택하면 되는듯?

 

Redux Toolkit

1. Redux 스토어(Store)

Redux 스토어는 애플리케이션의 전체 상태(state)를 관리하는 객체이다. 스토어는 애플리케이션의 상태를 보관하고, 상태를 변경하는 유일한 방법을 제공하며, 상태의 변경을 구독할 수 있도록 한다.

• 상태 저장: 애플리케이션의 상태 트리 전체를 저장한다.
• 상태 접근: getState()메서드를 통해 현재 상태를 접근할 수 있다.
• 상태 업데이트: dispatch(action) 메서드를 통해 상태를 업데이트할 수 있다. action은 상태를 어떻게 변경할지 설명하는 객체다.
• 구독 관리: subscribed(listener) 메서드를 통해 상태 변경을 구독할 수 있다. 상태가 변경될 때마다 리스너가 호출된다.

스토어를 생성하기 위해서는 Redux의 ‘createStore’ 함수 또는 Redux Toolkit의 ‘configureStore’ 함수를 사용한다. Redux Toolkit의 ‘configureStore’는 스토어 설정을 더 쉽게 해주는 도구이다.

2. 리듀서(Reducer)

리듀서는 애플리케이션의 상태를 변경하는 순수 함수이다. 리듀서는 현재 상태와 액션(action)을 인수로 받아서 새로운 상태를 반환한다. 리듀서는 다음과 같은 특징을 갖는다.

• 순수 함수: 주어진 인수 외에 다른 값을 참조하거나 변경하지 않는 함수, 동일한 인수로 호출되면 항상 동일한 결과를 반환한다.
• 현재 상태와 액션: 리듀서는 현재 상태와 액션을 인수로 받는다.
• 새로운 상태 반환: 리듀서는 새로운 상태 객체를 반환한다. 상태는 불변성이 유지되어야 하므로 기존 상태를 직접 변경해서는 안된다. 대신 새로운 상태 객체를 반환해야 한다.

 

1. Redux 및 관련 라이브러리 설치

npm install @reduxjs/toolkit react-redux

 

2. Redux 설정

2-1. 스토어 생성

‘src’ 디렉토리 아래에 ‘app’ 디렉토리를 만들고, ‘store.js’ 파일을 생성

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

 

2-2. 슬라이스 생성

‘src/features/counter’ 디렉토리를 만들고, ‘counterSlice.js’ 파일을 생성

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

2-3. Redux Provider 설정

‘src/main.jsx’ 파일을 수정하여 Redux Provider를 추가

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

2-4. 컴포넌트에서 Redux 사용

예시로 ‘src/App.jsx’ 파일을 수정하여 Redux 상태를 사용

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./features/counter/counterSlice";

function App() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <h1>count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </>
  )
}

export default App;

 

참고

[React] vite로 react 프로젝트 설치

Redux Toolkit 알아보기

모듈 번들러란? - Webpack vs Vite 무엇을 써야 할까요?