양식 제출용 버튼이 아니라면 type특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.
‘새로고침’을 하면 Redux의 데이터는 왜 초기화 되는걸까?
그 이유는 redux를 사용하는 react는 SPA 로서 CSR 방식으로 렌더링을 하기 때문입니다.
SPA 란?
SPA는 Single Page Application 의 약자로서 쉽게 말하면 하나의 페이지로 구성된 어플리케이션입니다.
SPA는 하나의 HTML 파일을 가지고 나머지는 javascript를 이용해서 동적으로 화면을 구성합니다.
즉, 최초 로딩 때 실행한 HTML 파일에서 변경되지 않는 부분은 그대로 두고 변경되는 부분만 다시 렌더링하여 효율적인 변경이 가능합니다.
CSR이란?
CSR은 Client Side Rendering의 약어로서, 인터넷 브라우저와 같은 클라이언트에서 렌더링 하는 렌더링 방식을 말합니다.
다시 말해, 서버로부터 css,js 링크만 있는 빈 HTML파일 (Json 파일)을 전송받아 클라이언트에서 렌더링하는 방식입니다.
이처럼 CSR 방식을 사용하는 react에서 새로고침을 하게되면 브라우저는 처음에 세팅되어 있던 데이터를 새로 받아오게 됩니다.
그렇기 때문에 ‘새로고침’ 시에 redux의 모든 데이터는 초기값으로 돌아가는 것입니다.
Q4. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?
redux-persist를 사용하면 됩니다.
redux-persist는 새로고침시에도 redux의 state가 초기화 되지 않도록 합니다.
그 방식은 local storage 또는 session에 저장하고자 하는 reducer state를 저장하여, 새로고침 하여도 저장 공간에 있는 데이터를 redux에 불러오는 것입니다.
Local storage란?
html5에서 제공하는 Web storage로는 local storage와 session storage가 있다.
둘다 웹의 데이터를 클라이언트에 저장할수 있는 저장소의 역할을 한다.
그러나 가장 큰 차이점은 지속성이다.
Local storage Session storage
1. 도메인마다 별로도 저장소가 생성된다. 따라서 도메인만 같으면 브라우저가 달라도 저장된 데이터가 공유된다.
1. 세션(브라우저)이 종료되면 저장된 데이터가 사라진다.
2. 시간 제한이 없고, 심지어 브라우저가 꺼져도 데이터가 남아있음.
2. 도메인이 같아도 다른 브라우저를 실행하면 각각의 저장소가 생성된다.
3. 값을 지우기 위해서는 직접 지워야 한다.
redux-persist 설치 방법
아래 명령어를 터미널에 입력해서 redux-persist를 설치한다.
npm install redux-persist
configStore에 아래와 같은 code를 삽입한다.
// reducers/index.js
import { combineReducers } from "redux";
// persistStore, persistReducer 를 추가
➊ import { persistStore,persistReducer } from "redux-persist";
// localStorage에 저장하고 싶은 경우에 아래와 같이 code 추가
➋ import storage from "redux-persist/lib/storage";
// session 에 data를 저장하고 싶으면 아래 code를 추가해준다.
// import storageSession from 'redux-persist/lib/storage/session'
import auth from "./auth";
import board from "./board";
import studio from "./studio";
➌ const persistConfig = {
key: "root",
storage, // localStorage에 저장합니다
whitelist: ["auth"] // auth, board, studio 3개의 reducer 중에 auth reducer만 localstorage에 저장합니다.
// 만약에 blacklist가 있다면 그것만 제외합니다
// 예시 blacklist: ["auth"]
};
export const rootReducer = combineReducers({
auth,
board,
studio
});
// 이 구문을 추가해주어야 합니다.
➍ export default persistReducer(persistConfig, rootReducer);
Root component가 있는 code를 추가해주어야 합니다.
root component는 기본적으로 App.jsx 파일에 있지만, 아래와 같이 index.js파일에서 app을 감싸주어도 됩니다.
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware, compose } from "redux";
import { Provider } from "react-redux";
➊ import { persistStore } from "redux-persist";
➋ import { PersistGate } from "redux-persist/integration/react";
import App from "./App";
import configureStore from "./store";
import { rootReducer } from "./reducers";
const store = createStore(rootReducer);
➌ const persistor = persistStore(store);
const Root = () => (
<Provider store={store}>
➍ <PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
);
ReactDOM.render(<Root />, document.getElementById("root"));
