[React/리액트] Redux의 개념과 특징, 그리고 사용 목적

🍡 Redux에 대해 알아보자

 

개념

상태 관리를 하기 위한 라이브러리로서, 상태관리 로직을 컴포넌트 밖에서 처리하여 State를 보다 효율적으로 관리하기 위한 목적을 가지고 있다.  리덕스를 사용하는 이유는 상태 관리를 하는 이유부터 알아본다면 훨씬 이해하기 쉽다.

 

상태 관리를 하는 이유?

2023.06.11 - [Front-End/React] - [리액트/React] 상태 관리는 왜, 어떻게 하는가?

 

사용 이유

Redux를 사용하는 이유는 상태 관리를 State를 전역적(Global)으로 관리하기 위해 사용하는데 이는 위에 개념에서 아시다시피 컴포넌트 밖에서 처리하기 위한 이유와 동일하다. 전역에서 사용하는 목적은 방대하게 커지는 프로젝트 규모에 의하여 리액트 특유의 단방향 데이터흐름의 문제점인 Props Drilling과 같은 상황을 피하고, 코드의 가독성과 유지보수를 보다 원활하게 하기 위함이다.

 

특징과 장점

• 단방향 데이터 흐름으로 개발을 하기 때문에 개발자가 작성한 액션 행위와 리듀서의 순수함수로 인하여 코드 추적이 용이하고, 버그를 예측하기 쉽다.
• 다양한 미들웨어를 가지고 있어, 비동기 작업이나 개발 컨트롤에 관하여 사용유도가 편리하다.
• 사용률이 높은 만큼 커뮤니티가 활발하여 개발환경이 편리하다.
• Action을 Dispatch 할때마다 기록이 남아 에러를 추적하기 용이하다.
• Store라는 이름의 변수를 통해 상태를 한 곳에서 관리하는 특징을 가지고 있고, 이를 상태의 중앙화라고 한다. 한 곳에서 관리하기 때문에 상태 관리가 용이하다.

 

단점

• 리덕스 초기의 환경 설정 셋팅이 쉽지 않아 공부한 후 적용이 필요하다.
• 비슷한 이유로 아주 작은 기능이여도 리덕스를 사용하기 위해선 필수로 사전 코드를 작성해야 하기 때문에 코드량이 늘어난다.
• 리덕스는 읽기 전용으로 취급하지만 실제로 읽기 전용으로 만들어주지 않기때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해줘야 한다. 이를 예방하기 위한 Immutable.js와 같은 라이브러리도 존재한다.
• 유용하게 사용하기 위해선 장점이 될수도 있지만 많은 패키지를 추가해야 하는 경우가 발생한다.
• 방대한 코드와 초기 세팅이 필요하고, 그만큼 라이브러리도 무거워진다. 따라서 굳이 필요하지 않은 경우에도 무분결하게 사용되는 경우가 있어 적재적소의 사유로 사용될 필요가 있다. 대안으로 다른 라이브러리들도 다양하다.

 

 

🍡 Redux의 구조 

• 액션(Action) 
  • 상태 변화를 일으킬 때 참조하는 객체이다.
  • 이벤트 정보를 저장하기 위한 순수 객체형태로 표현되며, 반드시 type 필드를 갖고 있어야 한다.
  • dispatch 인수에서 Reduce로 넘길 객체(type)을 정의한다.
  • Action이 실행되고 끝나면 type을 반환하는데 type은 Reduce로 전달된다.
• 액션 생성자(Action Creator)
  • 액션 객체를 만들어주는 함수이다.
• 스토어(Store)
  • 애플리케이션 전체 상태를 관리하며 dispatch(Action) 기능을 수행하며 하나의 스토어를 사용하는 것이 바람직하다.
  • Reduce에 의해서만 state 값이 변경된다.
• 리듀서(Reducer)
  • 애플리케이션이 로드될 때 발생되는 상태를 통해 저장소 정보를 업데이트 한다. 
  • state와 action 값을 받아 사용한다.
  • Reducer 함수는 순수 함수여야 한다. 
  • 결과 값을 출력할 때는 파라미터 값에만 의존해야 하며, 언제나 같은 결과를 출력해야 한다.
  • state를 사용한다면 반드시 state를 초기화해야 한다.
  • Reducer에서 state의 변화가 일어나며, 값의 갱신을 이 곳에서 해야 한다.
• 디스패치(Dispatch)
  • dispatch(action) 형태로 사용하는데, 액션을 실행시켜 스토어에 전달하는 것을 의미한다.
• 구독(Subscribe)
  • store의 내장 함수 중 하나로, 스통에 의한 상태 업데이트가 발생할 때마다 구독시 지정한 리스너 함수가 호출된다.
  • 상태값 변경 여부를 확인하기 위해 쓰인다.
  • 리액트 컴포넌트에서 리덕스 스토어를 구독하는 작업은 후에 react-redux의 connect 함수가 대신 한다.
  • 리덕스의 내장 함수를 사용하여 subscribe, unsubscribe 함수를 사용하여 구독 및 구독 취소를 할 수 있다.

 

 

리덕스의 실행 흐름  알아보기

https://cocoworld.tistory.com/79

 

 

🍡 리덕스를 사용할 때 3가지 원칙

 

1. 단일 Store로 사용하기

하나의 애플리케이션에 하나의 스토어만 사용한다. 여러 개의 스토어를 둘 수는 있지만 상태관리가 복잡해지며 권장되지 않는다.

 

2. 상태는 읽기 전용 상태

릭덕스 상태는 읽기 전용이다. 상태값을 불변 객체로 관리해야 내부적으로 데이터가 변경되는 것을 감지할 수 있다.

 

3. 리듀서는 순수 함수

순수 함수에서 결과값을 출력할 때는 파라미터 값에만 의존해야 하며, 같은 파라미터는 언제나 같은 결과를 출력해야 한다.

따라서 리듀서 내부에서 랜덤 값 생성, Date 함수 사용, 네트워크 요청과 같은 행위는 금지된다.