/ REACT

Redux

1. Redux 란?

간단히 얘기해서 redux는 컴포넌트의 개수가 굉장히 많은 프로젝트에서 효율적으로 상태값을 관리할 수 있는 상태관리 라이브러리이다.

2. Redux 개념

리덕스의 기본개념을 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리한다는 것이다. 리덕스를 사용하면 스토어(store)라는 객체 내부에 상태값을 담게 된다. 이를 사용하면 컴포넌트가 많은 복잡한 형태의 프로젝트에서 상태값에 연관된 모든 컴포넌트들을 업데이트 하고 리렌더링 할 필요 없이 바로 전달할 수 있게 된다는 것이다.

img

a. 스토어: 애플리케이션의 상태 값들을 내장하고 있다. 스토어는 하나만 존재한다.
b. 액션: 상태 변화를 일으킬 때 참조하는 객체.
c. 디스패치: 액션을 스토어에 전달하는 것을 의미한다.
d. 리듀서: 상태를 변화시키는 로직이 있는 함수이다.
e. 구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.

리덕스의 흐름을 간단히 정리해보면 다음과 같다. 액션을 디스패치에 넣어 동작시키면 스토어안의 리듀서가 스토어의 state 를 변경하고 변경된 state는 이를 구독하고 있는 컴포넌트에 전달한다.

이것의 장점은 state의 변화가 예측 가능하다는 점이다.

특정 액션이벤트 발생에만 리듀서가 작동하게 했기 때문에 스토어의 state가 변화한 경우 그것이 정확이 어떤 액션 이벤트로부터 변경된 것인지 알수 있다. 또한, 어떤 액션으로부터 변경된 것인지 알기 때문에 해당 state가 변화해온 과정을 마치 뒤로가기 버튼이 있는 것처럼 하나하나 확인해 볼수 있다는 것이다.

3. Redux 3가지 기본원칙

1. 애플리케이션의 모든 state는 하나의 store 안에 하나의 객체 트리 구조로 저장된다.
2. 리덕스의 state 값은 모두 읽기 전용이다
3. 모든 state 변화는 순수 함수(리듀서 함수)로 구성해야 한다 또한 순수 함수에서 결과 값을 출력할 때는 파라미터 값에만 의존해야 하며, 같은 파라미터는 언제나 같은 결과를 출력해야 한다

4. Redux의 역할

리덕스는 효율적으로 상태 관리를 할수 있는 라이브러리이다. 스토어에 상태 정보를 가진 객체를 넣어 두고, 액션이 디스패치되었을 때 리듀서 함수를 이용하여 상태를 변화시키고, 상태가 변화될 때마다 스토어에 구독된 함수를 실행시키는 것이 주요 역할이다.

JAVASCRIPT, REACT, NODE, CSS, REDUX