React Redux란?

Redux란?

• 모든 상태를 하나의 저장소(store)에서 관리하는 상태관리 라이브러리다.

• 리액트로만 프로젝트를 진행하게 될 시 규모가 클 수록 local state와 global state를 관리하기 어렵다는 단점이 있다.

• 하지만 리덕스를 사용하게 되면 하나의 store를 통해 모든 state를 저장, 유지할 수 있게 되며, 원하는 컴포넌트로 데이터를 전달 할 수 있게된다.

• 리덕스는 html, js 내에서도 사용이 가능하지만 컴포넌트간에 상태관리를 하는 리액트와 함께 쓰면 높은 시너지를 낼수 있기 때문에 리액트에서 많이 사용한다.

이미지로 보는 Redux원리

Redux주요 키워드

1. 액션(Action)

• 어떤 동작을 줄지 알려주는 역할을 한다.
• 모조건 객체형태여야 한다.
• type 프로퍼티를 필수적으로 갖고 있어야 하며, 그 외의 값은 상황에 따라 자유롭게 넣어줄 수 있다.
• dispatch의 파라미터로 전달된다.

{
  type: "CHANGE_INPUT", // 필수 작성
  text: "type외의 값은 개발자 맘대로!"
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

2.액션 생성함수(Action Creator)

• 액션을 만드는 함수이다. (필수적으로 사용하는것은 아님)
• 사용하는 이유는 나중에 컴포넌트에서 쉽게 액션을 발생시키기 위해서이다. 그래서 보통 export키워드를 붙여 다른 파일에서 불러와서 사용한다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

// 화살표 함수로도 만들 수 있다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

3. 리듀서(Reducer)

• 변화를 일으키는 함수이다.
• 두개의 파라미터를 가진다. (state와 action)
• 기존상태(state)를 전달받은 action을 참고해서 새로운 상태(객체)를 반환한다.
• useReducer를 사용할때 작성하는 리듀서와 같은 형태를 가진다.

주의점

• API호출이나 라우팅처럼 사이드이펙트를 야기하는것들을 사용해선 안된다.
• Date.now(), Math.random()처럼 순수하지 않은 함수를 호출 해서는 안된다. 이런작업들은 리듀서함수의 바깥에서 처리해야 하며 리덕스 미들웨어를 사용해 처리하곤 한다.

<순수함수 조건>

• 동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.
• 부수적인 효과가 일어나면 안 된다.
• return 값으로만 소통한다.

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE': // 액션의 type을 참고해서
      return state + 1; // 새로운 상태값 반환
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

4. 스토어(Store)

• 한 애플리케이션 당 하나의 스토어를 생성한다.

• 구성 : 현재의 앱 상태 / 리듀서 / 몇가지 내장 함수들(dispatch, subscribe..)

• 스토어가 하는일

  • 애플리케이션의 상태를 저장한다.
  • getState()를 통해 상태에 접근할 수 있게 해준다.
  • dispatch(action)을 통해 상태를 수정할 수 있게 해준다.
  • subscribe(listner)를 통해 리스너를 등록한다.

5. 디스패치(dispatch)

• 스토어의 내장함수 중 하나이다.
• 액션을 발생시킨다.
• 액션을 파라미터로 전달한다. 예시) -> dispatch(action)

6. 구독(subscribe)

• 스토어의 내장함수 중 하나이다.
• 함수형태의 값을 인자로 받는다.
• store를 주시하고 있다가 액션이 디스패치될 때 전달해준 함수를 호출한다 즉 스토어의 데이터가 변할때 마다 실행되는 메서드이다.
• 리액트에서 리덕스를 사용할때 이 함수를 직접 사용하는 일은 별로 없으나 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독한다.

이미지로 보는 Store, Action, Redcer의 의미와 특징

Redux 3가지 규칙

1. 하나의 애플리케이션안엔 하나의 스토어가 있어야한다. (Single source of truth)

• 여러개의 스토어를 만들 순 있지만 개발 도구를 활용하지 못하기 때문에 권장하지 않는다. 리듀서를 여러개 만들어 관리하는것은 가능하다.
• 모든 상태는 하나의 저장소(store)안에 하나의 객체 트리구조로 저장된다.

2. 상태는 읽기 전용이다. (State is read-only)

• 상태는 읽기전용 데이터이며 (불변), 액션만이 상태를 변경 할 수 있다.

3. 리듀서는 순수함수여야 한다. (Changes are made with pure functions)

• 리듀서함수는 이전상태와 액션 객체를 파라미터로 받는다.
• 이전상태는 절대 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어 반환한다.
• 똑같은 파라미터로 호출된 리듀서함수는 언제나 똑같은 결과값을 반환해야 한다.