[프론트엔드] Redux란?

Redux란?

Redux란 JavaScript 애플리케이션에서 클라이언트 사이드의 상태를 관리하기 위한 오픈소스 JavaScript 라이브러리입니다.

주로 React나 Angular와 같은 사용자 인터페이스 라이브러리/프레임워크와 함께 사용되며, 애플리케이션의 상태를 예측 가능하게 만들어줍니다.

 

React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다.

Redux는 매우 작지만 사용 가능한 애드온이 많습니다.

 

 

• Single Source of Truth(진실의 단일 출처) : Redux는 애플리케이션의 전체 상태를 하나의 JavaScript객체 트리로 저장합니다. 이 객체 트리는 "Store"라고 부르며, 이것은 앱 내에서 유일합니다.
• State is Read-Only(상태는 읽기 전용) : Redux에서 상태를 변경할 수 있는 유일한 방법은 "action"을 보내는 것입니다. Action은 어떤 일이 일어났는지 설명하는 평범한 JavaScript객체입니다.
• Changes are Made with Pure Functions (변경사항은 순수 함수로 만들어진다) : Action에 의해 상태 트리가 어떻게 변화하는 지 지정하기 위해 "reducer"라고 부르는 순수 함수를 작성합니다.

 

 

 

Redux의 장점

1. Predictability of outcome(결과 예측 가능성) : 동일한 입력에 대해 동일한 출력을 제공하기 때문에 시스템 동작을 예측하기 쉽습니다.
2. Maintainability(유지보수성) : 코드 구조와 데이터 흐름이 일관 되기 때문에 유지보수가 용이합니다.
3. Server rendering(서버 렌더링) : Redux가 초기 상태 설정을 간단하게 해주므로 서버 사이드 렌더링을 쉽게 할 수 있습니다.
4. Developer tools(개발자 도구) : 시간 여행 디버깅 등 강력한 개발자 도구를 제공하여 개발과정을 쉽게 재미있게 만듭니다.
5. Community and ecosystem(커뮤니티 및 생태계) : 큰 커뮤니티와 활발한 생태계를 가지고 있어 다양한 미들웨어 및 라이브러리와의 통합이 용이합니다.
6. Ease of testing(테스트 용이성) : 순수 함수로 구성되어 있기 때문에 테스트가 쉽습니다.

 

 

 

!주의점!

Redux를 사용하기 전에 장단점이 확실한 편이라 아래 조건에 부합하는 지 확인하고 사용하시는 게 좋습니다.

• 계속해서 바뀌는 상당한 양의 데이터가 있다
• 상태를 위한 단 하나의 근원이 필요하다
• 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 더이상 적절하지 않다

출처 : https://ko.redux.js.org/introduction/getting-started/

 

 

 

Redux 사용방법

https://ko.redux.js.org/introduction/getting-started/

Redux 시작하기 | Redux

 

1. npm이나 yarn으로 Redux를 설치합니다

npm 에서 패키지로 받습니

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

2. React Redux 앱만들기

npx create-react-app my-app --template redux

 

** Redux 코어

# NPM
npm install redux

# Yarn
yarn add redux

 

 

 

Redux는 애플리케이션의 복잡성에 따라 선택해야하는 상태 관리 도구입니다.

작은 프로젝트에서는 오버헤드가 될 수 있지만, 대규모 프로젝트에서는 상태 관리를 체계적으로 할 수 있게 도와줍니다.