[React] Redux 란 무엇인가?

리덕스란 무엇인가?

리덕스는 상태관리 라이브러리 이다.

 

리덕스는 왜 사용하나?

props 관리가 어려울 때 사용한다.

state 변경 관리할 때 사용한다.

 

• 리액트에서 컴포넌트에서 컴포넌트로 State를 보내기 위해서는 반드시 부모관계가 되어야 한다.
• 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 한다면 반드시 부모컴포넌트를 거쳐야만 한다.
• 하지만 정작 부모 컴포넌트에선 해당 값이 필요가 없어도 단순히 전달하기 위해 불필요하게 거쳐야만 한다. (props drilling)
• 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼수 없다.

이러한 불편함이 있기 때문에 상태를 전역적으로 관리하여 위 문제를 해소하고자 리덕스를 사용한다.

 

Local State (지역상태) 란?

컴포넌트에서 useState를 이용해 생성한 state이다. 

Global State (전역상태) 란?

Global state는 컴포넌트에서 생성되지 않는다. 중앙화 된 특별한 곳에서 state들이 생성된다.

좀 더쉽게 얘기해서 중앙 state 관리소 라고 생각하면 쉽다.

중앙 State관리소에서 state를 생성하고, 만약 어떤 컴포넌트에서 state가 필요하다고 하면 컴포넌트가 어디에 위치하고 있든 상관 없이 State를 불러와서 사용할 수 있게 된다.

이러한 State들을 Global State라고 하고 이런 값들을 관리 하는 것을 전역상태관리 라고 한다.

 

 

리덕스의 흐름

출처 : https://velog.io/@annahyr/%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%9D%90%EB%A6%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

1. View에서 action이 일어난다.

2. dispatch에서 action이 일어나게 된다.

3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.

4. middleware 에서 명령내린 일을 수행하고 난 뒤, reducer 함수를 실행한다.

5. reducer의 실행결과 store에 새로운 값을 저장한다.

6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다.

 

리덕스의 장단점

장점

단방향 모델링이다. 즉 버그를 예측하기 쉽다.

상태의 중앙화 : 스토어(Store)라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하는데 이를 중앙화라고 한다. 전역상태를 관리할때 굉장히 효과적이다.

Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 된다. 이런식으로 실행취소기능을 구현한다.

 

단점

아주 작은 기능이여도 리덕스로 구현하려면 몇개의 파일(액션등)들을 필수로 만들어야하여 코드량이 늘어난다.

타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 한다.

Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어 주진 않는다. 따라서 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다.

만약 다른 기능이 다 필요 없고 상태관리를 중앙화 하는것만 필요하다면 context API로 대체 가능하다.

 

 

리덕스 3가지 원칙

진실은 하나의 근원으로부터

애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.

이를 통해 범용적인 애플리케이션을 만들기 쉽고, 서버로부터 가져온 상태는 시리얼라이즈(serialized)되거나 수화(hydrated)되어 전달되며 클라이언트에서 추가적인 코딩 없이도 사용할 수 있다. 또한 하나의 상태 트리만 가지고 있기 때문에 디버깅에 용이하다. 빠른 개발 사이클을 위해 개발중인 애플리케이션의 상태를 저장해놓을 수도 있다. 하나의 상태트리만 가지고 있기 때문에 실행취소/ 다시실행 을 손쉽게 구현할 수 있다.

 

상태는 읽기 전용이다.

상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법 뿐이다.

이를 통해 뷰나 네트워크 콜백에서 결코 상태를 직접 바꾸지 못한다는 것을 보장할 수 있다. 모든 상태 변화는 중앙에서 관리되며 모든 액션은 엄격한 순서에 의해 하나하나 실행되기 때문에, 신경써서 관리해야할 미묘한 경쟁 상태는 없다. 

 

변화는 순수함수로 작성되어야 한다.

액션에 의해 상태트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야 한다.

리듀서는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다. 이전 상태를 변경하는 대신 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 한다. 처음에는 하나의 리듀서만으로 충분하지만, 애플리케이션이 성장해 나가면 상태트리의 특정한 부분들을 조작하는 더 작은 리듀서들로 나누는것도 가능하다. 리듀스는 그저 함수이기 때문에 호출되는 순서를 정하거나 추가적인 데이터를 넘길 수도 있다.