[redux] 리덕스 개념 이해하기

Redux란?

• 자바스크립트 상태관리를 위한 프레임워크.
• 리덕스를 사용하는 이유
  1. 컴포넌트 코드로부터 상태 관리 코드르 분리할 수 있다.
  2. 서버 렌더링 시 데이터 전달이 간편하다.
  3. 같은 상태값을 다수의 컴포넌트에서 필요로 할 때 좋다.
  4. 페이지가 전환되어도 데이터는 살아 있어야할 때 좋다.
• 이외에도 다양한 이유가 있다.

redux를 사용할 때 따라야하는 세 가지 원칙

1. 전체 상태 값을 하나의 객체에 저장한다.
2. 상태값은 불변 객체다.
3. 상태 값은 순수 함수에 의해서만 변경되어야한다.

하나의 객체에 프로그램의 전체 상태값을 저장한다.

• 전체 상태 값이 하나으 ㅣ자바스크립트 객체로 표현되기 때문에 활용도가 높아진다.
• 리덕스를 사용하면 하나의 객체를 직렬화해서 서버와 클라이언트가 프로그램의 전체 상태값을 서로 주고받을 수 있다.

상태 값을 불변 객체로 관리한다.

• 상태 값은 오직 액션 객체에 의해서만 변경되어야한다.

오직 순수 함수에 의해서만 상태값을 변경해야한다.

• 리덕스에서 상태값을 변경하는 함수를 리듀서라부른다.
• 리듀서는 순수함수로 사이드 이펙트를 발생시키지 않아야한다.

리덕스에서 상태 값이 변경되는 과정

액션 -> 미들웨어 -> 리듀서 -> 스토어 -> 뷰 ->액션

액션

• type 속성값을 가진 자바스크립트 객체
• 액션 객체를 dispatch에 매서드에 넣어서 호출하면 리덕스는 상태 값을 변경하기 위해 위의 과정을 수행한다.
• type 속성값 이외에도 원하는 속성값을 얼마든지 넣을 수 있다.

//액션을 발생시키는 코드
stroe.dispatch({type:'ADD',title:'영화보기',priority:'high})

// 액션 생성자 함수 예시
function addTodo({title, priority}){
return {type:'todo/ADD',title,priority};
}

미들웨어

• 리듀서가 액션을 처리하기 전에 실행되는 함수
• 디버깅 목적으로 상태 값 변경 시 로그를 출력하거나 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 미들웨어를 활용할 수 있다.
• 리듀서 사용시 특별히 미들웨어를 설정하지 않았다면 발생한 액션은 곧바로 리듀서로 보내진다.

//미들웨어의 기본 구조
const myMiddleware = store => next => acton => next(actoion);

• 미들웨어는 스토어와 액션 객체를 기반으로 필요한 작업을 수행할 수 있음.

리듀서

• 액션이 발생했을 때 새로운 상태 값을 만드는 함수
• 순수함수로 작성해야함.
• 객체를 참조할 때는 객체의 참조값이 아니라 id 값을 만들어서 고유한 값으로 접근하는게 좋음

//이머를 활용한 리듀서 함수의 예시
import produce from 'immer';

const person = {name:'mike',age:22};

//변경하고자 하는 객체
const newPerson= produce(person,draft =>{
  //객체를 수정해도 person객체의 값은 수정되지 않음
	draft.age = 32;
	};
                         

스토어

• 리덕스의 상태 값을 가지는 객체
• 액션의 발생은 스토어의 dispatch 매서드로 시작됨.
• 스토어는 액션이 발생하면 미들웨어 함수를 실행하고, 리듀서를 실행해서 상태값을 새로운 값으로 변경함.
• 그리고 사전에 등록된 모든 이벤트 처리 함수에게 액션의 처리가 끝났음을 알림.

---

참고
실전 리액트 프로그래밍 개정판