Redux란 무엇인가?

React로 로그인과 회원가입을 구현하려고 하면 Component 간의 정보를 공유해야 하는데 내가 기본적으로 알고 있는 방법은 Props 방법이었다.

 

일단 모르는 사람을 위해 

Props란 : 부모 Component에서 자식 Component로 Props를 통해 데이터를 전달할때 사용하는 속성이다.

상위 Component가 하위Component에 값을 전달해서 단방향 데이터 흐름을 갖고

부모 Componet는 수정이 가능하지만 자식 Component는 읽기만 가능하다.

위에서 아래로 내려주는 형태를 듸고 있는데

 

이걸로 만약 회원가입과 로그인을 만든다고 하면. 여러 문제가 생겼다..

대표적으로 Prop Drilling 이라고 한다.

 

Prop Drilling은 간단하게 말하자면 Prop를 추적하기 어렵다는것이다.

부모자식 Component로 이루어지고 단방향을 띄다 보니 계속 타고타고 내려가야 하는건데..

만들기에 너무 빡세다...

 

그래서 찾은게

---

Redux

Redux 핵심, Part 1: Redux Overview and Concepts | Redux

 

공식 홈페이지를 보게 되면 

 

 

What is Redux?​

It helps to understand what this "Redux" thing is in the first place. What does it do? What problems does it help me solve? Why would I want to use it?

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

 

 

리덕스가 무엇인지 설명해주고 있다.

Redux is a pattern and library for managing and updating application state, using events called "actions"

이 부분을 보면 Redux는 actions라는 이벤트를 사용하여 애플리케이션 상태를 관리하고 업데이트 하기위한 패턴 및 라이브러리 라고 한다.

 

밑에내용은 풀어서 설명해주고 있다.

 

상태를 예측가능한 방식으로 업데이트 할 수 있도록 하는 규치과 전체 애플리케이션에서 사용해야 하는 상태에 대한 중앙 집중식 저장소 역할을 한다!

---

 

중앙집중식 저장소 라는 단어를 보면 로그인과 회원가입이 떠오르게 된다.

일단 네이버를 생각해보자.

메인페이지를 들어가면 로그인을 했는지 안했는지 확인할 수 있다.

로그인이 되어 있으면 들어갈 수 있는 페이지가 존재하기도 하고

로그인이 안되어있으면 들어갈 수 없는 페이지

로그인을 하면 댓글을 달수있는 등

 

여러 사이트들이 나눠져있는 곳에 로그인이 되어있으면 사용자가 로그인을 하였는지 하지 않았는지 지속적으로 서버는 검사를 해야한다.

 

만약 기존 prop를 사용할경우 페이지 하나하나 다 작성을 해줘야하지만

Redux를 사용한다면 훨씬 간결하게 코드가 짜질 것이다.

 

 

---

Redux is more useful when:

• You have large amounts of application state that are needed in many places in the app
• The app state is updated frequently over time
• The logic to update that state may be complex
• The app has a medium or large-sized codebase, and might be worked on by many people

 

Redux측에서 설명하는 장점이다.

 

중복제거는 다음과 같은경우 유용하다고 한다.

 

1. 애플리케이션이 여러위치에 많은 양의 애플리케이션의 상태를 보유하고 있을경우

2. 시간이 흐름에 따라 앱 상태가 자주 업데이트 되는 경우

 

 

Core Concepts and Principles(Redux의 핵심 개념)

 

 

1. Single Source of Truth 단일 소스

애플리케이션의 전역 상태는 단일 저장소 내에 개체로 저장된다.

주어진 데이터 조각은 여러 위치에 복제되지 않고 한 위치에만 존재한다.

 

 

 

State is Read-Only 상태는 읽기 전용

상태를 변경하는 유일한 방법은 발생한 일을 설명하는 개체인 작업을 전달하는 방법이다. (setStatus 메소드를 활용하라는 말이다.)

이렇게 하면 UI가 실수로 데이터를 덮어쓰지 않고 상태 업데이트가 발생한 이유를 더 쉽게 추적할 수 있다

작업은 일반 JS 개체이므로 로깅, 직렬화, 저장 및 나중에 디버깅 또는 테스트 목적으로 재생할 수 있다.

 

Changes are Made with Pure Reducer Functions 

작업에 따라 상태 트리를 업데이트하는 방법을 지정하려면 Redux 함수를 만든다.

이전 상태와 작업을 수행하고 다음 상태를 반환하는 순수 함수이다.

Store - Action - Reducer

 

오늘은 여기까지 공부!