[47일차]React 상태 관리 및 개발 환경 분석

** Redux Toolkit을 사용한 상태 관리 구조**

이번 프로젝트는 Redux Toolkit을 사용하여 애플리케이션의 상태를 효율적으로 관리한다

2.1. ~Slice.ts 파일들 (boardsSlice, loggerSlice, modalSlice)

• 역할: 애플리케이션의 상태를 기능 단위로 분할하여 관리하는 'Slice(슬라이스)' 를 정의한다. 각 Slice는 특정 도메인의 상태(State), 리듀서(Reducer), 액션(Action)을 하나로 묶어 관리하는 것이다.
  • boardsSlice: 게시판(Board), 리스트(List), 태스크(Task)와 같은 핵심 데이터를 관리한다.
  • loggerSlice: 애플리케이션 내의 사용자 활동 로그를 저장한다.
  • modalSlice: 모달창의 상태와 모달에 표시될 데이터를 관리한다.
• 핵심 함수: createSlice
  • name: Slice의 고유 이름 (예: 'boards')이다.
  • initialState: 해당 Slice의 초기 상태 값이다.
  • reducers: 상태를 어떻게 변경할지를 정의하는 함수들의 모음이다. (현재 코드에서는 비어있지만, 이곳에 상태 변경 로직이 추가된다.)

2.2. reducer.ts (Root Reducer)

• 역할: 여러 개로 나뉜 Slice의 Reducer들을 하나로 통합하여, Redux 스토어가 관리할 수 있는 단일 루트 리듀서(Root Reducer)를 만드는 것이다.
• 구조: 각 Slice의 Reducer를 키(key)와 값(value) 형태로 매핑한다. 이 키는 나중에 상태를 조회할 때 사용된다. (예: state.logger, state.boards)

2.3. store.ts (Redux Store)

• 역할: 애플리케이션의 전역 상태 저장소(Store)를 생성하고 설정하는 것이다.
• 핵심 함수: configureStore
  • reducer: reducer.ts에서 만든 루트 리듀서를 받아 스토어를 생성한다.
• 타입 추론: RootState와 AppDispatch 타입을 store로부터 자동으로 추출하여, TypeScript 환경에서 타입 안정성을 보장한다.

2.4. hooks.ts (Typed Hooks)

• 역할: Redux의 기본 useSelector와 useDispatch 훅에 TypeScript 타입을 적용한 커스텀 훅(Custom Hook)을 만드는 것이다.
  • useTypedSelector: 상태를 조회할 때마다 타입을 지정할 필요 없이, 자동으로 RootState 타입을 추론해준다.
  • useTypedDispatch: dispatch 함수가 어떤 액션을 받을 수 있는지 AppDispatch 타입을 통해 알 수 있게 한다.

결론: 이 코드 구조는 상태 로직을 기능별로 분리(Slice)하고, 이를 하나로 합쳐(Reducer) 전역 스토어(Store)를 만든 후, 타입이 지정된 훅(Hook)을 통해 컴포넌트에서 안전하고 편리하게 상태를 사용하기 위한 것이다.

3. 주요 개념 및 질문 답변

3.1. Vite란 무엇인가?

Vite(비트)는 차세대 프론트엔드 개발 도구(Build Tool)이다. 기존의 Create React App(CRA)과 같은 도구들이 가진 개발 서버의 느린 시작 속도와 빌드 시간을 혁신적으로 개선했다.

• 핵심 특징:
  1. 빠른 개발 서버: 브라우저가 요청하는 파일을 즉시 변환하여 제공하는 Native ES Module 방식을 사용한다. 이 덕분에 프로젝트 크기가 커져도 개발 서버 시작 속도가 매우 빠르다.
  2. 빠른 HMR (Hot Module Replacement): 코드 수정 시, 전체 파일을 다시 빌드하지 않고 변경된 모듈만 교체하여 화면에 즉각적으로 반영한다.
  3. 최적화된 빌드: 프로덕션(배포용) 빌드 시에는 Rollup이라는 번들러를 사용하여 코드를 최적화하고 하나 이상의 파일로 묶어준다.

3.2. npm vs npx 차이

• npm (Node Package Manager)

  • 역할: Node.js 패키지(라이브러리)를 설치하고 관리하는 도구이다.
  • 주요 명령어: npm install, npm uninstall, npm update.
  • 동작 방식: package.json에 명시된 라이브러리를 node_modules 폴더에 설치하고, 프로젝트의 의존성을 관리한다.

• npx (Node Package eXecute)

  • 역할: 패키지를 실행하는 도구이다.
  • 동작 방식: 로컬 node_modules에 설치된 패키지나, 설치되지 않은 패키지를 임시로 다운로드하여 딱 한 번 실행하고 지운다.
  • 주요 사용 예: npx create-react-app my-app 처럼, 프로젝트를 초기 설정하는 CLI 도구를 설치 없이 바로 실행할 때 매우 유용하다.

3.3. 상태 관리: props vs Redux (및 기타 라이브러리)

• Props (Properties)

  • 역할: React의 기본 데이터 전달 방식이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 단방향 데이터 흐름을 따른다.
  • 문제점 (Props Drilling): 컴포넌트 구조가 깊어지면, 특정 자식에게 데이터를 전달하기 위해 중간의 여러 컴포넌트를 거쳐야 하는 Props Drilling 현상이 발생하여 코드 유지보수가 어려워진다.

• Redux (및 Zustand, Recoil, Context API 등)

  • 역할: 전역 상태 관리 라이브러리이다. 애플리케이션의 상태를 컴포넌트와 분리된 전역 공간(Store)에 저장하고, 어떤 컴포넌트에서든 직접 해당 상태를 가져와 사용할 수 있게 한다.
  • 장점:
    1. Props Drilling 해결: 깊은 구조의 컴포넌트에도 데이터를 쉽게 전달할 수 있다.
    2. 상태 중앙화: 상태 변경 로직이 한곳에 모여있어 예측 가능하고 디버깅이 용이하다.
  • 차이점:
    • React Context API: React에 내장된 기능으로, 간단한 전역 상태 관리에 적합하다. 하지만 상태가 자주 변경되면 렌더링 성능 이슈가 발생할 수 있다.
    • Redux: 가장 오래되고 안정적인 라이브러리이다. 복잡한 상태 로직 관리에 강력하지만, 초기 설정이 다소 복잡했다. (Redux Toolkit이 이 단점을 크게 개선했다.)
    • Zustand, Recoil: Redux보다 훨씬 간결한 문법으로 상태 관리를 할 수 있는 최신 라이브러리들이다.

3.4. Slice, Reducer, 그리고 redux.ts(Store)

• Reducer (리듀서): "현재 상태(State)와 액션(Action) 객체를 받아, 새로운 상태를 반환하는 순수 함수"이다. Redux의 핵심 원칙으로, (state, action) => newState 형태를 가진다.
• Slice (슬라이스): Redux Toolkit에서 도입한 개념이다. 기존 Redux에서는 State, Action, Reducer를 별도의 파일로 분리하여 관리했지만, Slice는 이들을 하나의 기능 단위로 묶어 관리한다. 코드 구조가 훨씬 직관적이고 보일러플레이트가 줄어든다.
• store.ts (Store): 애플리케이션의 모든 상태가 저장되는 단 하나의 저장소이다. 각 Slice에서 만들어진 Reducer들을 하나로 합쳐 Store를 생성한다. 컴포넌트는 이 Store에 접근하여 상태를 읽거나, 변경을 요청(dispatch)한다.

4. 설치된 라이브러리 설명

• @reduxjs/toolkit: Redux를 더 쉽고 효율적으로 사용하기 위한 공식 도구 모음이다. createSlice, configureStore 등 보일러플레이트를 줄여주는 유용한 기능들을 제공한다.
• redux: Redux의 핵심 라이브러리이다. (Toolkit에 포함됨)
• react-redux: React와 Redux를 연결해주는 라이브러리이다. Provider, useSelector, useDispatch 같은 도구를 제공하여 React 컴포넌트에서 Redux Store를 사용할 수 있게 한다.
• clsx: 여러 CSS 클래스 이름을 조건부로 쉽게 조합할 수 있게 도와주는 유틸리티 라이브러리이다.
• @vanilla-extract/css: 'Zero-runtime' CSS-in-JS 라이브러리이다. TypeScript/JavaScript로 스타일을 작성하면, 빌드 시점에 정적인 CSS 파일로 추출되어 성능에 이점이 있다.
  • @vanilla-extract/css-utils: vanilla-extract 사용 시 자주 쓰이는 유틸리티 함수들을 제공한다.
  • @vanilla-extract/vite-plugin: Vite 환경에서 vanilla-extract를 사용할 수 있도록 해주는 플러그인이다.
• react-icons: Font Awesome, Material Icons 등 유명 아이콘들을 React 컴포넌트처럼 쉽게 사용할 수 있게 해주는 라이브러리이다.
• uuid: 고유한 ID(Universally Unique Identifier)를 생성해주는 라이브러리이다. 게시판, 리스트, 태스크 등 고유 ID가 필요한 항목에 사용된다.
• react-beautiful-dnd: React 애플리케이션에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있게 해주는 라이브러리이다. (단, 현재 React 18+ 버전과 호환성 이슈가 있어 @dnd-kit/core가 대안으로 많이 사용된다.)