Redux - 상태관리 라이브러리

iamokian·2022년 3월 27일
redux
0

Redux

목록 보기
1/1

Redux?

리덕스는 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있고 컴포넌트끼리 똑같은 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전다하거나 업데이트할 수 있다.

👀리액트에서만 리덕스를 쓴다?

**리덕스는 리액트에 종속되는 라이브러리가 아니다. 리액트에서 사용하려고 만들어졌지만 실제로 다른
UI 라이브러리 / 프레임워크, 그리고 바닐라자바스크립트와 함께 사용할 수도 있다.

1. 자주 접하는 키워드

1. 액션(action)

상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생한다. 이는 하나의 객체로 표현되며 액션 객체는 type필드를 반드시 가지고 있어야 한다. 이 값이 액션의 이름이다. 그 외의 값들은 상태 업데이트를 할 때 참고해야할 값이다.

{
	type: 'ADD_TODO',
    data: {
    	id: 1,
        text: '리덕스 배우기'
    }
}

{
	type: 'CHANGE_INPUT',
    text: '안녕하세요'
}

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 reducer(state = initialState, 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.subscribe(listener);

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

2. 리덕스의 세 가지 규칙

1. 단일 스토어

하나의 애플리케이션 안에는 하나의 스토어가 들어있다. 그렇다고 여러 개의 스토어를 사용하는 것이 불가능 한것은 아니다. 하지만 상태관리가 복잡해질 수 있으므로 권장하는 방법은 아니다.

2. 읽기 전용 상태

리덕스 상태는 읽기 전용이다. 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교검사를 하기 때문이다. 객체의 변화 감지시에 깊게 비교하는것이 아닌 겉핥기 식 비교를 하여 좋은 성능을 유지할 수 있다.

3. 리듀서는 순수한 함수

변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 그러기 위해 다음 조건을 만족시켜야 한다.

  • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
  • 파라미터 외의 값에 의존하면 안된다.
  • 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
  • 똑같은 파라미터로 호출된 리듀서 함수는 똑같은 결과 값을 반환한다.

리액트를 다루는 기술을 읽고 요약한 글 입니다😊

profile
iamokian
필기하고 기록하고

0개의 댓글