이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →
예제
Redux는 소스 코드에 몇 가지 예제를 포함하고 배포됩니다. 대부분의 예제는 CodeSandbox에서도 확인할 수 있으며, 이 온라인 편집기를 통해 웹에서 직접 예제를 실행해 볼 수 있습니다.
Counter Vanilla
Counter Vanilla 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
open index.html
또는 샌드박스에서 확인하기:
이 예제는 빌드 시스템이나 뷰 프레임워크가 필요하지 않으며, ES5와 함께 사용되는 기본 Redux API를 보여주기 위해 제작되었습니다.
Counter
Counter 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
또는 샌드박스에서 확인하기:
이는 Redux를 React와 함께 사용하는 가장 기본적인 예제입니다. 간결함을 위해 스토어가 변경될 때마다 React 컴포넌트를 수동으로 다시 렌더링합니다. 실제 프로젝트에서는 고성능 React Redux 바인딩을 사용하는 것이 좋습니다.
이 예제는 테스트를 포함합니다.
Todos
Todos 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
또는 샌드박스에서 확인하기:
이 예제는 Redux에서 상태 업데이트가 컴포넌트와 어떻게 연동되는지 깊이 이해하기에 가장 적합합니다. 리듀서가 작업 처리를 다른 리듀서에 위임하는 방법과 React Redux를 사용해 프레젠테이션 컴포넌트에서 컨테이너 컴포넌트를 생성하는 방법을 보여줍니다.
이 예제는 테스트를 포함합니다.
Todos with Undo
Todos with Undo 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-with-undo
npm install
npm start
또는 샌드박스에서 확인하기:
이 예제는 이전 예제의 변형입니다. 거의 동일하지만, 추가적으로 리듀서를 Redux Undo로 래핑하면 몇 줄의 코드로 앱에 실행 취소/다시 실행 기능을 추가할 수 있음을 보여줍니다.
TodoMVC
TodoMVC 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install
npm start
또는 샌드박스에서 확인하기:
이는 고전적인 TodoMVC 예제입니다. 비교 목적으로 포함되었으며, Todos 예제와 동일한 내용을 다룹니다.
이 예제는 테스트를 포함합니다.
Shopping Cart
Shopping Cart 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
또는 샌드박스에서 확인하기:
이 예제는 앱이 커질수록 중요해지는 Redux의 주요 관용 패턴을 보여줍니다. 특히, 엔티티를 ID별로 정규화된 방식으로 저장하는 방법, 여러 수준에서 리듀서를 구성하는 방법, 그리고 상태 구조에 대한 지식을 캡슐화하기 위해 리듀서와 함께 셀렉터를 정의하는 방법을 다룹니다. 또한 Redux Logger를 통한 로깅과 Redux Thunk 미들웨어로 액션의 조건부 디스패치를 시연합니다.
트리 뷰
트리 뷰 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
또는 샌드박스에서 확인하기:
이 예제는 깊게 중첩된 트리 뷰 렌더링과 상태를 정규화된 형태로 표현하여 리듀서에서 쉽게 업데이트할 수 있는 방법을 보여줍니다. 컨테이너 컴포넌트가 자신이 렌더링하는 트리 노드에만 세분화하여 구독함으로써 뛰어난 렌더링 성능을 달성합니다.
이 예제는 테스트를 포함합니다.
비동기 처리
비동기 처리 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start
또는 샌드박스에서 확인하기:
이 예제는 비동기 API에서 데이터 읽기, 사용자 입력에 대한 응답으로 데이터 가져오기, 로딩 표시기 표시, 응답 캐싱 및 캐시 무효화를 다룹니다. 비동기 부수 효과를 캡슐화하기 위해 Redux Thunk 미들웨어를 사용합니다.
유니버설 렌더링
유니버설 렌더링 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/universal
npm install
npm start
이 예제는 Redux와 React를 사용한 서버 사이드 렌더링의 기본적인 데모입니다. 서버에서 초기 스토어 상태를 준비하고 클라이언트에 전달하여 기존 상태에서 클라이언트 스토어를 부트스트랩하는 방법을 보여줍니다.
실제 프로젝트 수준 예제
실제 프로젝트 수준 예제 실행하기:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm install
npm start
또는 샌드박스에서 확인하기:
가장 고급 수준의 예제로 의도적으로 밀도 높게 구성되었습니다. 가져온 엔티티를 정규화된 캐시에 유지, API 호출을 위한 커스텀 미들웨어 구현, 부분적으로 로드된 데이터 렌더링, 페이지네이션, 응답 캐싱, 오류 메시지 표시 및 라우팅을 다룹니다. 추가로 Redux DevTools가 포함됩니다.
추가 예제
더 많은 예제는 Redux 애드온 카탈로그의 Redux 앱 및 예제 페이지에서 찾을 수 있습니다.