Redux -기본개념

오늘은 미팅을 가지고 쉽다의 레거시코드를 받을 수 있었다.

그런데 그동안 봤던 코드 중 가장 복잡하고 이해하기 힘들었다.

그래서 이번 주에 정해진 Sprint를 진행하기 위한 Task 작성을 해야하는데 너무 모르겠어서 세분화를 할 수가 없었다.

그래서 우선 레거시 코드에 사용된 스택 공부가 선행되어야 할 것 같아서 이번에는 redux에 대하여 공부를 해보려고 한다.

 

1.Redux의 기본 개념

Redux를 실습하기 전 알아야하는 키워드들이 있다.

 

1-1. 액션(Action)

상태에 어떠한 변화가 필요하게 될 때 액션이란 것을 발생시켜야 한다.

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

type은 반드시 들어가야하고, 그 외 값들은 마음대로 넣을 수 있다.

{
	type: "TOGGLE_VALUE"
}

1-2 액션 생성함수(Action Creator)

액션 생성함수는 액션을 만드는 함수이다. 파라미터를 받아서 액션 객체 형태로 만들어준다.

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

1-3 리듀서(Reducer)

리듀서는 변화를 일으키는 함수이다.

리듀서는 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환하다.

function reducer(state, action) {
	return alteredState;
}

1-4 스토어(Store)

리덕스에는 한 애플리케이션 당 하나의 스토어를 만들게 된다.

현재의 앱 상태와, 리듀서가 들어가고, 추가적으로 몇가지 내장 함수들이 있다.

 

1-5 디스패치(dispatch)

디스패치는 스토어의 내장함수 중 하나이다.

액션을 발생시키는 것으로 이해하면 편하다.

dispatch(action) 방식으로 액션을 파라미터로 전달하면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 참고해서 새로운 상태를 만든다.

 

1-6 구독(subscribe)

구독 또한 스토어의 내장함수 중 하나로 함수 형태의 값을 파라미터로 받아온다.

subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출된다.

 

 

1-7 마무리

간단한 개념정리는 완료했고, 이제 이것을 지도로 그린다면 아래와 같은 그림으로 설명할 수 있다.

이 사진은 생활코딩에서 받아왔고 이후 실습도 계속 따라해볼 생각이다.

redux를 따로 배우고 이후 react-redux까지 쭉 가보려고 한다.