📁 리액트를 이용한 Task 생성 앱 만들기
📚 Part 1 태스크 정리 앱 만들기 시작
📌 개발 환경 세팅
npm init vite- 위 명령을 터미널에서 실행한다.
- 프로젝트 이름 설정 후, React 선택. 그 후 타입스크립트 선택
다음과 같이 파일들이 만들어짐.
- 아래 명령어를 실행하여 프로젝트가 의존하고 있는 모든 패키지를 설치한다.
특정 패키지 명을 명시하지 않을 경우package.json에 명시되어있는 모든 의존 패키지를 설치하여node_modules에 적재하는 것이 가능함.
npm i- 이후 아래 명령을 실행해본다
npm run dev |  |
|---|
📌 구조 생성하기
리액트에서는 데이터를 props로 공유하는데 앱이 점점 커지다보면 props로 모든 컴포넌트들의 데이터를 관리하기 어렵다. (소스코드가 지저분해짐.)
이를 관리하고, 해결하기 위해 주로 상태 관리 라이브러리를 사용하게 된다!
대표적으로 Redux, Mobs, Zustand, Recoil, React에서 제공하는 Context 등이 있음.
이번 프로젝트에서는 Redux를 사용할 것이다.
리덕스 부분의 소스코드를 정리하기 위해 store 폴더를 만듦.
커스텀 hooks들을 만들어서 사용할 것이므로, hooks 폴더를 만든다.
hooks 폴더 아래에redux.ts를 만들어서 redux를 위해 필요한 hooks들을 만든다.
useSelector,useDispatch를 타입스크립트에서 사용할 때에는 hooks로 만들어서 사용하는 것이 편함.
components 폴더를 만들어서
component들을 이 폴더 안에서 관리할 것임.
위 확장 프로그램을 설치해준다. rafce로 tsx 틀 짜기 가능
📌 필요한 패키지들 설치하기
@reduxjs/toolkitreduxclsx@vanilla-extract/css@vanilla-extract/css-utils@vanilla-extract/vite-pluginreact-iconsuuidreact-beautiful-dndreact-redux
clsx: 클래스 네임을 만들때 더 많은 로직들을 사용할 수 있음. 아래와 같이 사용함. 위 문장과 아래 문장은 같음
return(
<div className={clsx('foo', true && 'bar', 'baz');}></div>
<div className={'foo bar baz'}></div>
)css를 위한 패키지들도 설치한다. 이 프로젝트에서 우리는 css를 ts 파일에 작성하도록 저장할 것이다. 따라서 타입스크립트에서의 스타일 시트를 작성하기 위해 다음 패키지들을 설치한다.
@vanilla-extract/css@vanilla-extract/css-utils@vanilla-extract/vite-plugin
react-icons: 아이콘을 사용할 때 react에서 제공해주는 아이콘을 사용할 것임
uuid: unique한 아이디를 만들어줄 것임
react-beautiful-dnd: 이 패키지를 이용하여 drag and drop 기능을 구현할 것임
npm install @reduxjs/toolkit redux clsx @vanilla-extract/css
@vanilla-extract/css-utils @vanilla-extract/vite-plugin
react-icons uuid react-beautiful-dnd react-redux npm install react-redux📌 리덕스 사용을 위한 준비하기
Redux란?
리액트 애플리케이션에서 상태를 관리하기 위한 상태관리 라이브러리
Redux를 사용하면 전역 상태를 관리할 수 있으며, 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해줌.
💎 store
상태가 관리되는 하나의 공간임. 애플리케이션의 전역 상태를 저장하는 객체
- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담음.
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근함.
💎 action
상태를 업데이트하기 위한 객체
- 앱에서 스토어에 운반할 데이터
- 자바스크립트 객체 형식으로 되어있음
Dispatch는 함수임.- 함수 안에 action을 인수로 넣어줘서 전달함 (Reducer 함수로 전달함)
💎 Reducer (리듀서)
- 액션을 스토어에 바로 전달하는 것이 아니라 리듀서에 전달해야 함
- Action을 Reducer에 전달하기 위해서는
dispatch()메소드를 사용함.
Reducer 함수는 type에 따라 일을 처리함. 이 함수에서 return 하는 값이 Redux Store에 있는 state로 업데이트가 됨. Redux Store에 있는 값이 update가 되면 React Component가 rerendering 됨.
reducer 함수는 두 가지의 파라미터를 받음
1. state : 현재 상태
2. action : 액션 객체
Toolkit Reducer Slice Store Provider React Component Wrapper
Store를 생성하려면 Reducer가 있어야 한다. 그리고 Toolkit에서 Reducer를 생성하려면 Slice가 있어야 한다... 따라서 Slice부터 만든다. Slice에서 Reducer를 제공해주고, 이것을 이용하여 Store를 생성한다. 그 후, 이것들을 사용하기 위해 Provider로 React Component를 감싸주는 순서이다.
@reduxjs/toolkit에서 제공해주는 createSlice API를 이용하여 슬라이스의 이름과 initialState (초기 State)를 설정해준다.
📌 리덕스 Hooks 생성하기
✏️ 1. store 생성
store 폴더 아래에 index.ts 파일을 만든 후, configureStore API를 가져옴.
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer : reducer
})✏️ 2. Redux store 제공
<Provider> 로 감싼다. 그리고 store를 전달함.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.createRoot(document.getElementById('root')!).render(
<Provider store={store}>
<App />
</Provider>
)타입스크립트에서는 타입스크립트가 추론을 못하면 개발자가 타입을 지정해줘야 함
