그동안 시험기간, 해커톤 등 여러 이벤트 들이 있어서 업로드를 하지 못하였다.
종강했으니 다시 화이팅 !!

Redux

크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템
즉 우 어플리케이션을 변경하고 화면에 표시는 데이터를 관리하도록 도와줌

다수의 컴포넌트나 앱 전체에서 상태 관리를 하도록 도와줌

Redux의 간단한 흐름

Redux는 하나의 어플리케이션에서 중앙 데이터 저장소이다.
저장소에 데이터를 저장하고 컴포넌트 안에서 해당 내용을 사용할 수 있다

컴포넌트 상태가 변경될떄 마다 Redux가 변경됬다고 알려준다 그러면 컴포넌트는 필요한 데이터를 받게 된다

저장된 데이터를 변경하는 법

컴포넌트는 절대로 저장된 데이터를 직접 조작하지 않는다

Reducer Function(리듀서 함수)는 입력을 받아 그 입력을 변환하고 줄이는 함수이다
즉, 입력을 변환하여 새로운 출력, 새로운 결과를 뱉어낸다

데이터 흐르는 방향
Redux -> component -> Reducer Function 을 통해 저장소 데이터 변경을 담당

Reducer Function과 컴포넌트를 연결하는 방법

액션이 있고 컴포넌트가 액션을 발송한다. 그래서 컴포넌트가 어떤 액션을 트리거 한다고 말할 수도 있다.
리덕스는 그 액션을 리듀서로 전달하고 원하는 작업에 대한 설명을 읽게 된다.
그리고 그 작업을 리듀서가 수행한다

액션: 단순한 자바스크립트 객체 (리듀서가 수행해야할 작업을 설명)

State 종류

1. Local State
   데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태

   보통 useState, useReducer을 통해 컴포넌트 안에서 로컬 상태를 관리함

2. Cross-Component State
   하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 상태

   useState,useReducer을 통해 구현할 수 있고 Prop을 주변에 넣어줘야함

3. App-wide State
   다수의 컴포넌트가 아니라 애플리케이션의 모든 컴포넌트에 영향을 미치는 상탸

   사용자 인증

React Context

Redux와 마찬가지로 크로스 컴포넌트 상태나 앱 와이드 상태를 관리하도록 도와줌

React Context의 잠재적 문제

1. 규모가 큰 프로젝트 같은 경우 상태 관리가 상당히 복잡해 질 수 있다

2. 성능적 문제
   데이터가 자주 변경되는 상태에서는 좋지 않다

   유동적인 상태 확산을 대체할 수 없다
   즉, context값이 업데이트되면 해당 context를 구독하는 모든 하위 컴포넌트가 다시 렌더링 된다

   유동적인 상태 확산
   상태를 적절한 위치에서 생성하거나 업데이트하고 이를 필요한 컴포넌트에 빠르고 유연하게 전달하는 능력