[React] redux state 초기화 이유

Q. <form>을 사용할 때, <button type="submit">을 함께 사용하면 리덕스 데이터가 초기화 되는 것을 볼 수 있습니다. 왜 초기화 되는 지 생각해봅시다.

데이터를 submit하기 위해 페이지를 reload하고
페이지가 reload되면 리덕스 store의 state가 초기화가 된다.

해결 방안)

1. 새로고침 이벤트 막기
   <button>

2. React-router-dom 사용하기
   Link, navigate은 주소만 바꾸고 페이지를 새로고침 하지 않는다.
   클릭을 이용해 이동할 때는 Link 컴포넌트 사용
   함수 기능 내에서 페이지를 이동할 때에는 useNavigate, navigate 사용

3. Redux-persist 패키지
   꼭 새로고침을 해야 하는 경우, redux-persist 사용
   localStorge: 새로고침을 해도 데이터가 초기화되지 않음
   SessionStroge: 새로고침 시 데이터 초기화

Reference) https://velog.io/@dusunax/Redux-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B4%88%EA%B8%B0%ED%99%94-%EC%9D%B4%EC%9C%A0-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0