[Redux기초]리덕스 기초 개념
[강의자료 복습]
리덕스를 사용하기 앞서 왜 필요하게 되었는지에 대한 이해와 비슷한 역할을 하는 context와 어떤 차이가 있는지를 정리
State의 세 가지 정의
State는 크게 세 가지로 정의 될 수 있다.Local stateCross-Component StateApp-Wide State
1️⃣Local State
하나의 컴포넌트 내에서 영향을 미치는 상태
2️⃣Cross-Component State
다수의 컴포넌트에 영향을 미치는 상태. props를 이용해서 컴포넌트들 간의 상태를 관리 할 수 있다.
3️⃣App-wide State
애플리케이션 모든 컴포넌트에 영향을 미치는 상태. 로그인 정보나 테마 등이 있을 수 있다.
Context VS Redux
크로스-컴포넌트 상태와 앱-와이드 상태에서 props로만 업데이트 하는것은 번거로운 작업일 수 있다.
이럴땐 상태관리 라이브러리의 도움을 받을 수 있다.
여기서 전역상태를 관리하는 context를 사용해도 문제 없다.
그렇게 되면 Redux같은 상태관리 라이브러리가 존재하는 이유가 없을 것이다.
Context를 사용했을때 생기는 두 가지 잠재적인 단점이 있다.
1️⃣복잡한 상태관리
Context를 사용하면 상태 관리가 복잡해진다. 소형,중형 어플리케이션에서는대부분 문제가 될 가능성이 적다.
하지만 대형 어플리케이션에 리액트 컨텍스트를 사용하면 중첩된 컨텍스트가 나올 수 밖에 없게된다.
2️⃣성능 문제
테마,인증 같은 저빈도 업데이트에는 context가 적합할 수 있지만, 데이터가 빈번히 변경되는 경우 성능에 있어 적합하지 않다.
Redux의 기본 동작
상태 관리 라이브러리인 Redux는 복잡한 어플리케이션에서 컴포넌트 간에 상태를 효과적으로 관리 할 수 있다.
- 컴포넌트는 저장소에 있는 데이터를 직접 조작할 수 없다. 리듀서를 이용해서 저장소의 상태를 업데이트 해야한다.
- dispatch를 통해 Action 객체를 전달한다. Action은 단순한 자바스크립트의 객체다.
- Action은 리듀서에게 수행해야할 작업을 알려준다. 리듀서에서는 Action에 맞는 동작을 수행하고 업데이트한다.
- Store를 구독하고있는 컴포넌트는 Store의 상태가 변경되면 알림을 받게되고 UI를 업데이트 한다.