리액트를 이용한 Task 생성 앱 만들기 - Part1

만들고자 하는 앱 살펴보기

1. 게시판 버튼
2. 각 게시판마다 리스트가 있음
3. 리스트 요소는 드래그 앤 드롭으로 이동 가능
4. 게시판 삭제
5. 게시판 활동 로고 표시

프로젝트 초기 설정 및 폴더 구조

$ npx create-react-app

or

$ npm init vite
Project name: ./
Select a framework: : React
Select a variant: TypeScript

Scaffoldinf project in /Users/...

앱이 생성된 후, 의존성 설치를 위해 다음 명령어를 실행합니다:

npm i

이로써 package.json에 명시된 라이브러리들이 node_modules 폴더에 설치됩니다.

구조 생성하기

앱의 기능별로 파일들을 관리하기 위해 src 폴더 내에 아래와 같은 폴더들을 생성합니다:
src 파일안에 components, hooks, store, type폴더들을 만들어준다.

• store: 원래 컴포넌트 사이에 통신을 하기 위해서는 props를 사용해주는데, 앱이 커지다보면 props가 복잡해지기에, 상태관리를 이용하기 위해 만들어준 파일이다. 우리는 redux를 사용할 예정이다.
  • reducer: 리듀설에 대한 파일을 넣는 폴더
  • slices: 로그랑 모달에 대한 slice 파일을 넣는 폴더
• hooks: 커스텀 훅을 저장한다.
• types: 전체적인 타입을 관리해줄 폴더
• components: UI를 구성하는 컴포넌트들을 모아둔다.
  • ActionButton
    • DropDownFrom
  • BoardList
    • Sideform
  • List
  • ListContainer
  • LoggerModal
  • ModalEdit
  • Task

패키지 선택 및 설치

설치된 주요 패키지

• @reduxjs/toolkit & redux:Redux를 효율적으로 사용하기 위한 툴킷으로, 액션과 리듀서를 쉽고 간단하게 관리할 수 있습니다.
• clsx: 동적으로 클래스 이름을 조합할 때 유용합니다.
• @vanilla-extract/css, @vanilla-extract/css-utils, @vanilla-extract/vite-plugin:
  TypeScript 파일 내에서 CSS를 작성할 수 있게 해주며, Vite 빌드 시 이를 적용하기 위한 플러그인입니다.
• react-beautiful-dnd: 드래그 앤 드롭 기능을 구현하기 위한 라이브러리이지만, 현재는 사용하지 않도록 되어 있습니다.

Redux 상태 관리 설정

앱이 커지면 컴포넌트 간의 props 전달이 복잡해지고 코드가 지저분해질 수 있습니다. 이를 해결하기 위해 전역 상태 관리 라이브러리인 Redux를 도입합니다.

주요 Slice파일

• boardsSlice.ts:
  게시판(board) 관련 데이터 구조를 정의합니다.
  각 board에는 여러 개의 리스트가 있으며, 각 리스트는 여러 태스크(task)를 포함합니다.
  예제에서는 초기 상태로 하나의 board와 두 개의 리스트, 그리고 각 리스트에 속한 태스크들을 설정합니다.
• loggerSlice.ts: 앱 내 활동 로그(ILogItem)를 배열로 저장하기 위한 슬라이스입니다.
• modalSlice.ts: 모달에서 편집할 태스크 정보를 저장하며, 선택된 board, list, 그리고 태스크 정보를 관리합니다.

리듀서 결합 및 스토어 구성

• reducer.ts: 각 슬라이스에서 생성된 리듀서를 하나의 객체로 결합합니다.
  이후 configureStore를 사용하여 전체 Redux 스토어에 반영합니다.
• store/index.ts:
  Redux 스토어를 생성합니다.
  TypeScript에서 상태와 디스패치 타입을 올바르게 추론할 수 있도록 RootState와 AppDispatch 타입을 정의합니다.
  이를 통해 컴포넌트들은 전역 상태에 쉽게 접근하고 업데이트할 수 있습니다.

타입 관리

• types/index.ts: 인터페이스를 정의하는 폴더, ITask, ILogItem, IBoard, IList 등의 인터페이스를 정의하여 앱 전반에서 사용할 데이터 구조를 명시합니다.
  이를 통해 코드 작성 시 타입 안정성을 확보하고, 추후 버그를 줄일 수 있습니다.

커스텀 Redux Hooks

• hooks/redux.ts
  Redux의 useDispatch와 useSelector를 사용하여 컴포넌트에서 전역 상태를 쉽게 사용합니다.

타입 선언:

useTypedSelector와 useTypedDispatch로 타입 안전성을 보장하며, State와 Dispatch의 타입을 정확하게 명시합니다.
이렇게 커스텀 훅을 만들면 컴포넌트에서 Redux 사용 시 반복되는 타입 선언을 줄일 수 있습니다.

Vite 설정과 CSS-in-JS (vanilla-extract) 적용

• vite.config.ts
  Vite 설정 파일에서 react() 플러그인과 vanillaExtractPlugin()을 함께 사용하여, React와 vanilla‑extract를 동시에 사용할 수 있도록 설정합니다.

• App.css.ts: 스타일 파일 작성
  createGlobalTheme을 사용하여 CSS 변수를 정의합니다.
  색상, 폰트 크기, 간격, 그림자 등 기본 디자인 속성들을 전역 변수로 관리합니다.

컴포넌트별 스타일:

appContainer, board, buttons 등의 스타일을 정의하여, 각 컴포넌트가 일관된 스타일을 적용받도록 합니다.
이 방식은 TS 파일 내에서 스타일을 작성하고, 컴파일 시 일반 CSS 파일로 변환되어 사용됩니다. 코드와 스타일을 함께 관리할 수 있어 유지보수에 용이합니다.

메인 파일 및 App 컴포넌트 구성

• main.tsx

  • Provider 래핑: Provider로 Redux 스토어를 앱 전체에 주입합니다.
    이를 통해 앱 내 모든 컴포넌트가 전역 상태에 접근할 수 있게 됩니다.

• App.tsx

  • 기본적인 레이아웃을 구성하며, 실제 게시판과 관련된 컴포넌트를 배치할 영역이 마련됩니다.

스타일 적용

vanilla‑extract로 생성한 CSS 클래스들을 컴포넌트에 적용하여, 화면 전반의 디자인을 일관되게 유지합니다.