자바스크립트 + 리액트 디자인 패턴

363

Chapter 14_

리액트 애플리케이션 구조

14.2

최신 리액트 기능을 위한 애플리케이션 구조

최신 리액트 애플리케이션은 리덕스, 상태 관리 컨테이너,

Hooks

,

Styled

Components

등

다양한 기능을 활용합니다. 앞서 제시한 애플리케이션 구조에 이러한 기능과 관련된 코드를

어떻게 적용할 수 있을지 살펴보겠습니다.

14.2.1

리덕스

리덕스 공식 문서에서는 특정 기능에 대한 로직을 한 곳에 모아두는 것을 강력하게 권장

05

합

니다. 특정 기능 폴더 내에서, 해당 기능의 리덕스 로직은 단일 ‘슬라이스

slice

’ 파일로 작성되

어야 하며, 이때 가급적이면 리덕스

Toolkit

의

createSlice

API

를 사용하는 것이 좋습니다.

이 파일은

{

actionTypes

,

actions

,

reducer

}

를 독립적이고 캡슐화된 모듈로 묶습니다.

이는 리덕스의 ‘덕스

ducks

’ 패턴

06

으로도 알려져 있습니다. 예시는 다음

07

과 같습니다.

/src

index.tsx: Entry point file that renders the React component tree

/app

store.ts: store setup

rootReducer.ts: root reducer (optional)

App.tsx: root React component

/common: ...