리덕스란? 새로고침할 때도 리덕스 안의 데이터를 유지하려면?

먼저, 리덕스가 뭘까요?

리덕스는 아주 흔히 사용되는 상태 관리 라이브러리입니다. 

리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주기 때문에

우리가 전역 상태를 편하게 관리할 수 있습니다.

리덕스는 React뿐 아니라 다른 프론트엔드 프레임워크나 라이브러리와

함께 쓸 수 있습니다.

 

리덕스를 사용하려면 리덕스 패키지를 설치해야 합니다.

터미널에 다음을 붙여넣고 enter를 치세요.

yarn add redux react-redux

 

 

 

리덕스의 기본 용어를 알아보겠습니다.

1. State

리덕스에서는 저장하고 있는 데이터를 상태 값(state)이라고 부릅니다.

state는 딕셔너리 형태인 {[key]: value}로 보관됩니다.

 

 

2. Action

action은 state를 변경할 때 발생하는 객체입니다.

다음과 같이 쓰입니다.

{type: 'CHANGE_STATE', date: {...}}

여기서 type은 이름이고, type 뒤에는 우리가 정한 문자열을 넣습니다.

 

 

3. ActionCreator

ActionCreator는 액션 생성 함수입니다.

당연하게도 액션을 리턴합니다.

const changeState = (new_data) => {
   return {
   type: 'CHANGE_STATE',
   data: new_data
  }
}

 

 

4. Reducer

Reducer은 state를 바꾸는 함수입니다.

우리가 액션 생성 함수를 부르고 액션을 만들면

리듀서가 state와 액션 객체를 받아서

새로운 데이터를 만들고 리턴해줍니다.

const initialState = {
   name: 'mean0'
}



function reducer(state = initialState, action) {
      switch(action.type){
   // action의 타입마다 케이스문을 걸어주면, 액션에 따라서 새로운 값을 돌려줍니다.
      case CHANGE_STATE:
      return {name: 'mean1'};
      default:
      return false;
   }
}

 

 

5. Store

Store는 프로젝트에 리덕스를 적용하기 위한 것입니다.

store에는 리듀서, 현재 어플 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한

몇 가지 내장 함수가 들어있습니다.

딕셔너리 혹은 json처럼 생겼습니다.

 

 

6. Dispatch

Dispatch는 store의 내장 함수 중 하나로, 액션을 발생시킵니다.

우리가 발생시키고자 하는 액션을 파라미터로 넘겨서 사용합니다.

dispatch(action);

 

 

 

리덕스는 3가지 특징이 있는데요.

1. store는 프로젝트 하나당 1개만 씁니다.

 

2. store의 데이터, 즉 state는 오직 action으로만 바꿀 수 있습니다.

리덕스에 저장된 데이터는 허락없이 바뀌지 못하도록 읽기 전용입니다.

그런데 데이터를 수정하고 싶을 때가 있을 수 있잖아요?

이럴 때 action을 사용해서 원래 값은 그대로 두고,

새로운 변수를 만들어서 상태를 갈아끼웁니다.

이러면 데이터의 불변성을 유지하면서 새로운 값을 넣을 수 있죠.

 

3. 리듀서는 어떤 요청이 와도 같은 동작을 합니다.

리듀서는 순수한 함수여야 합니다.

순수한 함수라는 건,

파라미터를 제외한 값에 의존하지 않아야 하고,

파라미터가 같으면 항상 같은 값을 리턴하며,

이전 상태는 수정하지 않고,

이전 상태와 같은 액션을 파라미터로 받는다는 뜻입니다.

 

 

 

이 정도가 리덕스의 대략적인 내용입니다.

리덕스는 단점이 하나 있는데요.

바로 리덕스를 새로고침하면 그 안에 있던 state가 사라진다는 것입니다.

그 이유는 리덕스에 있는 데이터가 메모리(브라우저 캐시)에 저장되기 때문인데,

캐시와 비슷한 기능을 하는 redux-persist를 사용하면

state를 계속 저장할 수 있습니다.

redux-persist 패키지를 설치하고, 관련 js 파일을 수정하여 적용할 수 있습니다.

 

자세한 방법은 다음 링크를 참조하시면 됩니다.

https://developer0809.tistory.com/108