[Redux] 리덕스의 기본!

리덕스(Redux)는 리액트(React)를 사용할때 발생할 수 있는 Props-drilling 문제 해결에 도움을 줄 수 있는 상태관리 라이브러리이다.  다만 하나 주의해서 알아야하는 것은, Redux는 React의 관련 라이브러리, 혹은 React의 하위 라이브러리 가 아니다.

 

Props-drilling 문제 장바구니에 아이템B를 담기위해 state를 3번끌어올리고, props를 2번 내려줘야만 한다.

 

리액트로 웹개발을 진행하다 보면 사용자설정 테마, 권한에 따른 페이지뷰를 위한 권한 설정 등 특정상태를 전역에서 사용하고 싶어질 때가 있다. 이럴때 Props를 사용해서 state를 관리하게되면 만드는 모든 컴포넌트에 state를 내려줘야하기 때문에 상당히 비효율적이다.

---

Redux 동작과정

 

 

이런 복잡한 과정을 해결하기 위해서 Redux에서는 Store라는 특별한 전역저장소를 설정하고, 각 하위 컴포넌트는 이를 가져다 사용할 수 있다. 조금 더 자세히 알아보면 Redux 에는 Action, Dispatch, Reducer, Store 라는 개념이 있고 

Action → Dispatch → Reducer → Store 순으로 데이터가 단방향으로 전달되게 되어있다.

---

Action

어떤 액션을 취할 것인지 정의해 놓은 객체로, 다음과 같은 형식으로 구성된다.

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

여기서 type은 필수로 지정해주어야하는 속성으로, 변경할 함수의 이름이라고 생각하면 외우기 편하다.

관용적으로 대문자로 작성하고, 스네이크케이스 로 작성한다 (띄어쓰기 대신 _를 사용해 작성하는 방식)

 

보통은 action을 직접 작성하지않고 action 객체를 return 하는 함수를 이용한다.

// payload가 필요 없는 경우
const increase = () => {
  return {
    type: 'INCREASE'
  }
}

// payload가 필요한 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}

이러한 함수를 action creator (액션생성자) 라고 부른다.

 

---

Dispatch

Dispatch는 Reducer로 Action을 전달해주는 함수이다. Dispatch의 전달인자로 Action 객체가 전달된다.

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );