Today I Learned - 16

2022-12-06 (화)

🍓 Redux persist

: localStorage 또는 sessionStorage에 reducer state를 저장하여 새로고침 하여도 저장공간에 있는 데이터를 redux에 불러오는 방식 (새로고침 시에도 상태유지)

<요약>

• redux-persist 패키지 사용
• 자동로그인을 원하면 *localStorage를 사용
• 브라우저를 닫았을 때 로그인이 풀리는 것을 원하면 *sessionStorage를 사용

<목적>

• 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다.
• 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 🌟이런 경우 사용될 수 있음

*localStorage

• 오리진(domain/port/protocol)이 같은 경우 데이터는 모든 탭과 창에서 공유됩니다.
• 오리진만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있습니다.
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않습니다.

*sessionStorage

• 현재 떠 있는 탭 내에서만 유지됩니다.
• 같은 페이지여도 탭이 다르면 다른 곳에 저장됩니다.
• 하나의 탭에 여러 iframe이 떠 있는 경우 동일 오리진에서 왔다고 취급하여 sessionStorage 공유됨
• 새로 고침 할 때 sessionStorage에 저장된 데이터는 사라지지 않습니다. 하지만 탭을 닫고 새로 열 때는 사라집니다.

---

🍊 form 태그 & submit 이벤트

🔒 form 태그를 사용할 때,

<button type="submit">

을 함께 사용하면 리덕스 데이터가 초기화 되는데, 왜 초기화 되는 지 생각해봅시다.

form 태그 내부에 존재하는 모든 button 태그는 클릭 시 기본적으로 form을 전송하는 submit 이벤트를 발생시킴.

form 태그 자체가 기본적으로 작성된 폼을 서버로 전송하는 역할을 하기 때문에 type="submit" 이라는 속성을 별도로 지정하지 않아도 자동으로 submit 이벤트가 발생한다. 이 경우 해당 페이지는 reload가 진행되어 새로고침되어 리덕스 데이터가 초기화 된다.

1. form의 submit 이벤트에 return false 값을 추가하거나

<form onsubmit="return false">

2. submit 이벤트에 preventDefault() 이벤트를 추가하면 form 태그에 submit 이벤트가 발생하지 않는다.

  function preventSubmit(e){
    e.preventDefault();
 }