React # Redux

📝오늘 배운 내용

Redux는 리액트에서 가장 사용율이 높은 상태관리 라이브러리이다. Redux를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있고 글로벌 상태 관리도 쉽게 할 수 있다.

Redux의 기본 개념 : 세 가지 원칙

1. 진실은 하나의 근원으로부터

• 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다.

2. 상태는 읽기 전용이다.

• 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐이다.

3. 변화는 순수 함수로 작성되어야한다#

• 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야한다.

Redux의 장점

1. 상태를 예측 가능하게 만들어 준다.
2. 유지보수
3. 디버깅에 유리하다.
4. 테스트를 붙이기 쉽다.

Redux 키워드

액션 (Action)

• 상태에서 어떠한 변화가 필요하게 될 때 액션이라는 것을 발생시킨다. 이것은 하나의 객체로 표현되고, 액션 객체는 아래와 같은 형식으로 이루어져있다.

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 마음대로 넣어줄 수 있다.

{
  type: "ADD_TODO"
  data: {
    id: 1,
    text: "study redux"
  }
}

type과 payload의 의미

{
   type: "액션의 종류를 한번에 식별할 수 있는 문자열 혹은 심볼",
   payload: "액션의 실행에 필요한 임의의 데이터",
}

액션 생성함수 (Action Creator)

• 액션 생성함수는, 액션을 만드는 함수이다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.
• 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다. 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용한다.

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

// 화살표 함수로도 가능합니다.
export const inputChange = text -> ({
  type: "INPUT_CHANGE",
  text
});  

리듀서 (Reducer)

• 리듀서는 변화를 일으키는 함수이며, 두가지의 파라미터를 받아온다.
• 리듀서는, 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환한다. 이 리듀서는 useReducer 를 사용할때 작성하는 리듀서와 똑같은 형태를 가지고 있다.

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

• 카운터를 위한 리듀서 작성 예시

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

스토어 (Store)

• 리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있다.

디스패치 (dispatch)

• 디스패치는 스토어의 내장함수 중 하나이다. 디스패치는 액션을 발생 시키는 것 이라고 이해하면 된다. dispatch 라는 함수에는 액션을 파라미터로 전달한다. dispatch(action) 이런식으로 생각하면 된다.
  그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

구독 (subscribe)

• 구독 또한 스토어의 내장함수 중 하나이다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다. 리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없다. 그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독한다.