Redux (update_01)

음,, 정말 오랜만에 블로깅을 한다.

약간 의무성이 있어서 블로깅을 하게 되었지만

이 Redux를 시작으로 React부터 다시 차근차근 정리해보는 시간을 가지려고 한다.

 

자.. 그럼 Redux에 대해 공부한 내용을 정리해보자

(이해를 잘못해서 틀린 내용이 있을수도 있음 주의,, 지속적인 학습을 통해 수정할 예정)

 

먼자 살펴볼 것은 형제 컴포넌트인 A와 B 간 데이터를 주고 받으려면 Root 라는 부모 컴포넌트를 통해 주고 받아야 한다.

컴포넌트가 적다면 문제될 것이 없겠지만 예를 들어 중간에 많은 컴포넌트 가 있다고 가정하면

중간에 있는 모든 컴포넌트에 해당 기능을 전달해 주어야 하는데 상태관리가 복잡해질 것이다.

 

 

그래서 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 하는 방식이 Redux 다.

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.

데이터는 한 방향으로 흘러간다.

 

 

리덕스에서 사용되는 키워드 숙지하기

- Action

  - 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킴,

  - 하나의 객체로 표현된다.

  - 액션 객체는 type 필드를 반드시 가지고 있어야 하고, 그외에는 개발자 맘대로 넣을 수 있다.

(
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스"
  }
)

  - 액션 생성함수

    - 액션을 만드는 함수, 단순히 파라미터를 받아와서 액션 객체 형태로 만듬

    - 엑션 함수를 사용하는 이유 => 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함.

    - 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용

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


// 화살표 함수로도 만들 수 있음
export const addTodo = data => ({
  type: "ADD_TODO",
  data
});

 

- Reducer

  - 변화를 일으키는 함수

  - 두 가지의 파라미터를 받아옴

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

  - 리듀서는 현재 상태와 액션을 참고하여 새로운 상태를 만들어 반환한다.

  - 카운터 예시

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    // default 부분에 기존 state 를 그대로 반환하도록 작성해야 한다.
    default:
      return state;
  }
}

 

- Store

  - 리덕스에서는 한 애플리케이션당 하나의 스토어를 만듬

  - 스토어 안에는 현재의 앱 상태와 리튜서가 있다.

  - 추가적으로 몇가지 내장 함수들이 있음

 

- Dispatch

  - 스토어의 내장함수 중 하나

  - 액션을 발생 시키는 것

  - dispatch 라는 함수에는 액션을 파라미터로 전달한다.

    - dispatch(action)

  - 이렇게 호출하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있으면 액션을 참고하여

    새로운 상태를 만든다.

 

 

리엑트의 3가지 원칙

1. 하나의 애플리케이션 안에는 하나의 store가 있다.

  - 데이터를 저장하는 store 라는 공간이 있다.

  - state 정보가 필요할 때 store 에 접근해 정보를 가져옴

2. 상태는 읽기전용

  - Action 이라는 객체를 통해 state 변경 가능

  - Action 객체는 스토어에게 애플리케이션의 데이터 운반

  - 타입 지정해야하고, 정보를 객체 안에 담아줘야 한다.

3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 한다.

  - Action 객체는 Dispatch 메소드에게 전달,

  - Dispatch 는 Reducer 를 호출해 새로운 state 생성

1. View 에서 이벤트가 발생

2. Dispatch의 전달인자로 Action객체 통해 reducer에게 전달

3. reducer 액션객체의 타입에 따라 동작해 새로운 state 생성

 

 

 

참고: https://helloinyong.tistory.com/109

https://react.vlpt.us/redux/02-rules.html     

https://ko.redux.js.org/introduction/getting-started