[Redux기초]리덕스 기초 개념

[강의자료 복습]

리덕스를 사용하기 앞서 왜 필요하게 되었는지에 대한 이해와 비슷한 역할을 하는 context와 어떤 차이가 있는지를 정리

 

 

State의 세 가지 정의

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를 업데이트 한다.