[React] Redux 데이터 초기화 이유

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

이유

< form > 내부의 < button >은 클릭시 submit 이벤트가 발생되는데 데이터를 submit하기 위해 페이지를 리로딩하고 그 페이지가 리로딩되면 리덕스 store의 state 값이 초기화가 된다

< form > 태그는 입력 양식 전체를 감싸는 태그로 그 안에 포함된 input,selet 등 의 태그를 컨트롤 하는 역할을 한다.
리액트에서는 보통 state로 form에 value를 관리하고 sumbit 이벤트로 원하는 동작을 실행한다

초기화 막는 방법

1. 새로고침 이벤트 막기

<button name="hi" onClick={preventSubmit}>
...
function preventSubmit(e){
    e.preventDefault();
  //	 e.preventDefault()로 기본 이벤트를 막는다
    console.log(e);
}

2. react -router-dom 사용하기
   link, navigate는 주소만 바꾸고 페이지를 새로고침 하지 않는다

• 클릭을 이용해 이동할 때는 Link 컴포넌트 사용

 <Link to="/">Home으로 가기</Link>

• 함수 기능 내에서 페이지를 이동할 때에는 useNavigate, navigate 사용
  import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}
 

3. redux - persist 패키지 사용
   LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주는 Redux-Persist 라이브러리를 사용하기

• localStorge: 새로고침을 해도 데이터가 초기화되지 않음
• SessionStroge: 새로고침 시 데이터 초기화

store 역할

애플리케이션의 상태를 저장하고
getState()를 통해 상태에 접근하게 하고
dispatch(action)를 통해 상태를 수정할 수 있게 하고
subscribe(listener)를 통해 리스너를 등록합니다.

참조
참조