Redux를 알아보자 - 1

현업에서 일을 하면서 부터, 복잡한 컴포넌트 구조안에서 데이터를 다루기 위해서 리덕스의 필요성을 점차 느끼고 있다.

더 나은 프론트엔드 개발자가 되기 위해, 리덕스도 공부해 보자!

리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용하다. 또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 오로지 뷰(view)만 관리할 수 있게된다. (유지보수에 좋다)

상태 관리 흐름

1. 리덕스 Store를 Component에 연결한다.
2. Component에서 상태 변화가 필요할 때 Action을 부른다.
3. Reducer를 통해서 새로운 상태 값을 만들고,
4. 새 상태값을 Store에 저장한다.
5. Component는 새로운 상태값을 받아온다.

좀 더 알아보자

리덕스는 데이터를 한 군데 몰아 넣고, 여기저기서 편하게 꺼내 쓸 수 있게 해준다고 생각하면 이해하기 쉽다.

• Action

  상태에 변화가 필요할 때(= 가지고 있는 데이터를 변경할 때)발생하는 것.

// 액션은 객체이다. 
{type : 'CHANGE_STATE' , data : {...}

• ActionCreator

  액션 생성 함수.

const changeState = (newData) => {
// 액션을 리턴한다. (액션 생성 함수이기 때문에)
  return {
   type : "CHANGE_STATE",
   data: newDate
  }
}

• Reducer

  리덕스에 저장된 상태를 변경하는 함수.
  액션 생성 함수를 부르고 -> 액션을 만들면 -> 리듀서가 현재 상태와 액션 객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴해준다.

const initialState={name : "mean0"}
function reducer(state = initialState, action) {
	switch(action, type) {
    	// action의 타입마다 케이스문을 걸어주면,
        // 액션에 따라 새로운 값을 돌려준다.
      case CHANGE_STATE:
        return {name: "mean1"}
      default:
        return false;
    }
}

• Store

  리덕스를 적용하기 위해 만드는 것.
  스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있다.
  생김새는 객채 혹은 json처럼 생겼다.

• dispatch

  스토어의 내장 함수.
  액션을 발생 시키는 역할을 한다.