프로젝트를 하면서 사용했던 상태 관리 라이브러리인 Redux에 대해 알아보고자 한다. <리액트를 다루는 기술>이라는 책을 통해 당시 헷갈렸던 개념들을 다시 복습해보고자 한다.
일단 리덕스를 사용하면 좋은 가장 큰 장점은 props drilling(프로퍼티 내려꽂기)문제를 해결이라고 생각한다. 리덕스를 쓰지 않으면 상태 관리를 할 때props를 쓰지 않는 컴포넌트까지 거쳐서 내려줘야 할 때가 많아 수십개의 컴포넌트를 관리하려면 리덕스와 같은 라이브러리가 필수적이다.
또한 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용하므로, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화를 할 수 있다.
리덕스의 장점
- 코드의 유지 보수성을 높여주어(재사용 가능) 작업 효율 극대화
- 편리한 개발자 도구 지원
- 미들웨어를 통해 비동기작업을 효율적으로 관리 가능
- 전역 상태 관리에 좋다.
- 상태 업데이트 관련 로직을 다른 파일에 분리시켜 관리 용이
- props drilling 해결 -> 손쉽게 상태 값을 전달해 업데이트 시켜줌
🗒 리덕스의 개념 살펴보기
1. 액션(action)
상태에 어떠한 변화가 필요하면 하나의 객체로 표현되는 액션(action)이라는 것이 발생한다.
{
type: 'ADD_PLAY',
// 이 값은 액션의 이름으로 타입 필드가 있어야 한다.
data: {
id:1,
text: '리덕스 액션'
// 나중에 상태 업데이트를 할 때 참고할 값
}
}2. 액션 생성 함수(action creator)
액션 객체를 만들어 주는 함수를 말한다.
function addPlay(data){
return {
type: 'ADD_PLAY',
data
}
}3. 리듀서
변화를 일으키는 순수 함수이다.
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 두 값을 통해 새로운 상태를 반환해준다.
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 함수 안에 리스너 함수를 파라미터로 넣어서 호출하면, 상태가 업데이트 될 때마다 리스너 함수가 호출된다.
❗️리덕스에서는 지켜야할 세가지의 규칙이 있다.
1. 한 프로젝트에는 하나의 스토어만
앞서 말했듯이 스토어는 하나만 쓴다. 여러 스토어를 만들 수는 있지만 상태관리가 많이 복잡해지므로 비효율적이다.
2. 읽기 전용 상태
리덕스는 읽기 전용이기때문에 상태를 업데이트할 시에는 기존의 객체는 건들이지 않고 새로운 객체를 생성해야 한다.
리덕스가 불변성을 유지하는 이유는 객체의 변화를 감지할 때 얕은 비교검사를 해서 최적의 성능을 유지하려고 하기 때문이다. (그렇지 않으면 변화된 상태값을 추적하는데 오랜 시간이 걸리므로 효율성이 떨어진다. )
3. 순수 함수
리듀서는 순수 함수로 다음 조건을 만족해야 한다.
- 함수의 파라미터는 이전 상태와 액션 객체를 받는다.
- 파라미터 외의 값을 의존하면 안된다.
- 기존 객체는 그대로 두고 새로운 상태 객체를 반환한다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환한다.
ex) 함수 내부에 랜덤값 만들거나, Data함수 사용, 네트워크 요청
은 파라미터가 같아도 다른 결과를 낼 수 있어서 사용하면 안된다.
(리덕스 미들웨어나 함수 외부에서 처리해야 한다.)
다음 챕터에서는 리덕스 데브 툴과 hook을 사용해서 연습하고자 한다.
사용하지 않으면 자꾸 헷갈리게 되어서 항상 짜놓은 코드를 복습하고 실습하는 습관이 중요한 것 같다.
발췌 : 리액트를 다루는 기술, 김민준
