[프론트엔드] REACT Redux 라이브러리[1]

728x90

Redux란?

리덕스란 가장 많이 사용되는 리엑트의 상태관리 라이브러리이다.

리덕스를 사용할 경우 컴포넌트 상태를 업데이트 하는로직을 분리하여 더 효율적으로 관리 할 수 있다.

컴포넌트간의 상태를 공유할 떄도 컴포넌트를 거치는 일(props) 없이 쉽게 전달/업데이트가 가능하다.

Conext Api도 같은 작업을 할 수 있지만 리덕스 라이브러리를 사용하면 상태를 더 체계적으로 관리 할 수 있기 떄문에 대규모 프로젝트를 사용할 경우에는 리덕스를 사용하는게 좋다.

코드 유지보수성, 작업 효율, 등을 극대화할 수 있고 미들웨어 기능을 제공함으로써 비동기 작업들을쉽게 관리 할 수 있다.

개념 정리하기

리덕스를 사용하면서 접하게 될 키워드 개념을 정리해보도록 하려고 한다.

1.액션

상태에 변화가 필요하면 액션(action)이 발생한다.

액션객체는 다음과 같은 형식으로 이루어져 있다.

{
	type: 'TOGGLE-VALUE'
}

액션 객체는 반드시 type이란 필드를 가지고 있어야 한다.

이러한 값을 액션의 이름으로 봐야하고 그이외의 값을 상태 업데이트 시에 참고해야 할 값으로 작성자(개발자)가 임의로 작성할 수 있다.

2.액션 생성 함수

액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수이다.

function addTodo(data) {
	return {
    	type: 'ADD-TODO',
        data
    };
}

// 화살표 함수로 만들기
const changeInput = text => ({
	type: 'CHANGE-INPUT',
   	text
});

어떤 변화를 일으키려면 액션 겍체를 만들어서 선언해줘야 한다. 매번 액션 겍체를 직접 작성하기는 번거롭고 실수로 잘못 작성할 수 있다.

이러한 이슈를 관리하기 위하여 함수로 만들어서 액션생성 함수를 관리한다.

3.리듀서

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

액션을 만들어서 발생시키기 위해서는 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아오게 된다.

그리고 두 값을 참조하여 새로운 상태를 만들어서 반환해준다.

const initialState = {
	counter: 1
};
function reduer(state = initalState, action) {
	switch (action, type) {
    	case INCREMENT:
        	return {
            	counter: state.counter + 1
            };
       	default:
        	return state;
   }
}

4.스토어

프로젝트에 리덕스를 적용하기 위해서는 스토어(store)를 만들어야 한다.

한 개의 프로젝트는 하나의 스토어만 가질 수 있다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가고, 몆 가지 중요한 내장 함수를 지니고 있다.

5.디스패치

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

디스패치는 '액션을 발생시키는 장치'정도의 의미를 가지고 있다. 이 함수는 dispatch(action) 다음과 같은 형태로 액션 객체를 파라미터로 넣어서 액션을 발생시키는 함수이다.

이 함수가 호출되면 스토어는 리듀서 함수를 실행시키고 새로운 상태의 결과를 반환한다.

6.구독

구독(subscribe)도 스토어 내장 함수 중 하나이다.

subcribe 홤수 안에 리스너 함수를 파라미터로 넣어서 호출해주고 이 함수가 액션이 디스패치(액션 발생 상태)가 되어 업데이트 될 때마다 호출된다.

const listener = () => {
	console.log('상태 업데이트');
}
const unsubscribe = store.unsubscribe(listener);

unsubscribe(); // 후에 구독을 비활성화 할 떄 함수 호출