[React] 페이지 새로고침 시에 상태 값이 초기화 되는 오류

문제

페이지를 새로고침하는 경우, 모든 변수와 상태 값이 초기화되는 문제가 있었다.

결론적으로 useState와 useContext를 정확하게 이해하지 않아 발생한 오류였다.

 

useState 는 변수 값을 상태 값으로 저장하여 상태 값이 변경되었을 경우, 해당 상태 값을 사용하는 컴포넌트만 부분적으로 리렌더링된다.

전체 페이지를 리렌더링 하지 않고, 부분 리렌더링으로 부하를 줄일 수 있다.

 

useContext는 useState의 사용이 많거나 변수를 전역으로 선언하여 사용하는 경우에 사용에 용이하다.

useState 값을 context 내에 저장하여 관리할 수 있다.

 

다만, 두 Hook 모두 값이 변하지 않는 것이 아니다.

 

리렌더링 되는 경우에는 기존의 값을 기준으로 변화된 컴포넌트들만 바뀌어 렌더링되어 보여진다.

그러나 페이지를 리프레시하는 경우, 모든 변수와 상태 값이 초기화되어 기존 데이터가 사라진다.

정확하게 확인하지 않고, 코드를 작성한 잘못이 크다....하ㅠ...

 

이를 해결하기 위해서 값을 브라우저에 저장해야 한다.

 

---

 

해결 방법

1. 웹 저장소에 저장하는 방법

웹 저장소에 직접 저장하여 관리하는 방법이 있다.

웹 저장소에는 local storage, session, cookie, indexDB 가 있다. 이 중 local storage, session에 저장하여 관리하는 방법에 대해 알아보려고 한다.

단, 웹 저장소는 문자형 데이터만 지원한다.

1) LocalStorage 에 저장

로컬 저장 공간에 접근할 수 있는 storage 객체이다.

key와 value 값으로 저장할 수 있고, string 타입만 지원한다.

저장된 데이터는 페이지 프로토콜로 구분된다.

만료 기간 없이 데이터를 저장할 수 있고, 웹 페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.

2) Session 에 저장

창을 새로고침 시 데이터는 유지되지만, 브라우저를 열거나 새 탭을 열 때, 데이터가 초기화된다.

임시 저장 용도로 적합하다.

 

 

2. Redux 사용하기!

공식 홈에서 아래 한 줄로 리덕스를 설명하고 있다.

A Predictable State Container for JS Apps

리덕스는 “action”이라 불리는 이벤트를 사용하여 어플리케이션 상태를 관리하고 업데이트하는 라이브러리이다.

 

전체 어플리케이션에서 상태에 접근할 수 있는 특징이 있어 전역 변수를 관리할 수 있다.

redux를 사용할 때, local storage에 저장하는 방식과 session에 저장하는 방식 두 가지를 모두 사용할 수 있다.

 

userContext에 저장했던 데이터는 전역 변수로 사용하는 값이라, 위의 방법 중 Redux를 사용하여 문제를 해결했다!

페이지를 리프레시해도 값이 저장되도록 redux-persist를 사용했다.

 

결국 웹 저장소에 저장하여 값을 불러오는 것은 동일하다.