React ■ 상태관리(2)

 

 

React-Redux를 활용한 상태 관리

Redux란?

Redux는 컴포넌트 간 데이터 흐름이 복잡해지는 문제를 해결하기 위해 고안된 자바스크립트의 상태 관리 라이브러리입니다. 기존 방식에서 컴포넌트가 많아질수록 데이터 전달이 복잡해지는 문제를 보완해줍니다.

 

 

Redux의 주요 개념

State

State는 컴포넌트에서 사용하는 동적인 값, 즉 상태 데이터를 의미합니다. 일반적으로 사용하는 변수와 유사한 개념이지만, Redux에서 관리하는 상태는 보다 중앙화된 방식으로 처리됩니다.

Action

Action은 상태에 변화를 줄 때 발생하는 객체입니다. 이 객체는 반드시 type 필드를 가져야 하며, 그 외의 데이터는 선택적으로 포함될 수 있습니다.

Action Creator

Action Creator는 액션 객체를 생성하는 함수입니다. 이 함수는 파라미터를 받아 상태를 변경시키기 위한 액션을 생성해줍니다.

 

Reducer와 Dispatch

Reducer

Reducer는 상태를 변경하는 함수입니다. state와 action을 인자로 받아, 새로운 상태를 반환합니다. action 객체를 통해 전달된 명령에 따라 상태를 업데이트합니다.

1. state : 현재 상태 값

2. action : dispatc로부터 받을 액션 또는 변경할 상태 값

Dispatch

Dispatch는 액션을 리듀서로 전달하여 상태를 변경하는 함수입니다. 

1. state : 현재 상태 값

2. action : dispatc로부터 받을 액션 또는 변경할 상태 값

 

기존 컴포넌트 통신 방식

 

 

리덕스를 활용한 통신 방식

 

 

redux 설치

 

npm install redux react-redux

npm install @reduxjs/toolkit

* 리덕스 툴킷(=RTK) : redux에서 공식적으로 추천하는 방법중의 하나로써 redux를 더 편하게 사용할 수 있도록 해주는 라이브러리

 

 

 

 

그럼 20000!!!!!!!!!!!!!!