21.04.10 redux 개념

📌리덕스를 왜 쓸까?

컴포넌트의 데이터를 관리할 때, 서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우에 사용한다. 

(컴포넌트마다 공통되는 데이터를 통합적으로 관리하는 경우에는 컨텍스트를 사용한다. )

 

property : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터 

state : 컴포넌트의 state를 저장하고 변경할 수 있는 데이터 

context : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터 

redux : 서버에서 받은 데이터를 앱 전체에 전달하거나 관리함. (노드의 세션 같은 것인가)

 

📌redux의 동작 과정 

리덕스의 동작 과정

component는 dispatch 함수를 통해 action 을 reducer에 넘겨준다. 

action은 리듀서에서 처리해야 할 작업의 이름과 데이터가 객체 형태로 들어있다. 

reducer는 action을 받아서 store 변경 작업을 진행한다. 

완료되면 connect 함수로 연결된 component에 변경된 store의 데이터를 전달하여 동기화한다. 

 

📌 action : state에 어떠한 변화가 필요하면 action이 생성된다. 

액션 객체는 다음과 같이 type 필드를 필수적으로 가지고 있어야한다. 

(예를 들어 버튼을 눌렀을 때 +1이 되어야 하는 상황에서 

state에 필요한 변화 : 값에 +1을 해주는 것, 

action : 그 데이터를 객체 형태로 넘겨주는 것)

//type은 필수로!!, 그 외 데이터는 문자열 형태든, 객체 형태든 상관 없음. 
{
	type : 'TOGGLE_VALUE', 
    text : '하이룽'
}

{
	type : 'ADD_TODO', 
    data : {
    	id : 1, 
        text : '내일 할 일',
    }
}

 

📌 action creator: 액션 객체를 만들어주는 함수이다. 

//data 객체를 인자로 받아서 액션 객체의 값으로 넣어준다. 
function addTodo(data){
	return {
    	type : 'ADD_TODO', 
        data
    }
}

//text 문자열을 인자로 받아서 액션 객체의 값으로 넣어준다. 
//화살표 함수의 경우, 
const change = (text)=>({
	type : 'input', 
    text
})

액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다.

보통 함수 앞에 export 를 붙여서 다른 파일에서 불러와서 사용한다.

📌 reducer : 변화를 일으키는 함수 

액션을 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 이 두 값을 참고해서 새로운 상태를 만들어서 반환한다. 

//key는 counter이고 value는 1인 객체를 초기값으로 설정
const initialState = {counter : 1}

//리듀서 함수를 이용하여 초기상태의 상태와 액션을 넘겨주고 
function reducer(state = initialState, action){
	//action객체의 type이 INCREMENT일 경우, 아닐 경우
	switch(action.type){
    	//INCREMENT일 경우 counter의 값을 변경 후, 바뀐 객체를 state return 시킨다. 
        case INCREMENT : 
    	return {
        	//state의 counter value에 +1 해준다. 
        	counter : state.counter + 1
        }
        //아닐 경우, 현재 상태 초기값 유지
        default : 
        	return state;
    }
}

리덕스를 사용할 때는 여러 개의 리듀서를 만들고 이를 합쳐서 아래와 같이 rootReducer를 만들 수 있다.

const rootReducer = combineReducers({
	counter, 
    todos,
});

export default rootReducer;

📌 store : redux에서 데이터를 관리하는 곳이다!

store에서 component에 저장된 데이터를 넘겨주고, component는 데이터가 변경되면 store에 이를 요청한다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다. 스토어 안에는 현재 어플리케이션 상태와 리듀서가 들어있다. 

📌dispatch : 스토어 내장 함수이다.

dispatch(action)과 같은 형태로 액션 객체를 인자로 넣어서 호출한다. 

dispatch 가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다. 

 

📌subscribe : 스토어 내장 함수이다.

subscribe 함수 안에 리스너 함수를 인자로 넣어서 호출하면 액션이 디스패치되었을 때마다

리스너 함수가 호출된다. 

react-redux에서 제공하는 connect 함수 또는 useSelector를 사용하여

리덕스 스토어 상태를 구독하게 되므로 이 함수를 사용하는 일은 별로 없다!

 

📌리덕스를 사용할 때 사용하는 패턴 

-container component : 리덕스와 연동되어있는 컴포넌트 

리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치하기도 한다. 

-presentational component 

주로 상태 관리가 이루어지지 않고 props만 받아와서 화면에 UI를 보여주기만 하는 컴포넌트이다. 

(리덕스와 가깝게 지내면서 데이터를 바꿔주고 관리하는 애와 그 데이터를 화면에 보여주는 애)