[React] Store 유지한 채 페이지 새로고침하기 (Remounting)

Remount

구현하게 된 배경

React를 사용할 때 전역 상태의 값은 냅두고 페이지를 새로고침하고 싶을 때가 있다.

예를 들어, 신청페이지에서 신청 내역을 작성 후 신청을 했을 때 사용했던 모든 local state를 초기화하고 싶은 경우이다.

 

이는 단순히 rerender를 통해 상태나 값을 새로 그리는것과는 다르다.

기존의 컴포넌트를 unmount 시킨 후 새로운 것을 mount 시키는 remounting을 원하는 것에 가깝다.

 

🙅‍♂️ window 이용?

<pre>window.location.reload()</pre>를 통해 새로고침을 하면 상태를 비워버릴 수는 있지만 이 또한 아래와 같은 문제가 있다.

• 모든 state가 초기화되는 점 (local state를 포함한 global state(zustand 등)까지)
• global state를 저장하기 위해서는 locationStorage 등의 별도 방법을 사용해야하는 점

 

🙆‍♂️ 방법 : Key 이용

그래서 고민을 하다가 컴포넌트의 key를 이용하기로 했다.

React component에는 key 라는 프롭스를 전달할 수 있다.

 

React는 DOM element를 구분할 때 key 값을 이용하며, 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용된다.

따라서 key가 변경되면 기존의 인스턴스를 탈락시키고 새로 그리는 것이다.

 

아래는 그를 응용해서 버튼을 누르면 리마운트하도록 구현한 코드이다.

const Component = () => {
  const [key, setKey] = useState(0);
  
  const onClick = () => {
    setKey(key + 1);
  }
  
  return (
    <div key={key}>
      <button onClick={onClick}>Button</button>
    </div>
  );
}

 

 

단점

기존의 것을 언마운트시킨 후 다시 마운트 시키기 때문에 아무래도 성능 이슈가 발생할 수 밖에 없다.

그렇지만 간편한 트릭으로 기존의 상태값을 다 날릴 수 있기 때문에 필요한 곳에서 잘 사용하면 유용할 것 같다.

 

---

참고

React 공식문서 : key 값의 역할

https://ko.legacy.reactjs.org/docs/reconciliation.html#recursing-on-children

재조정 (Reconciliation) – React

 

https://medium.com/@Blochware/the-key-to-performance-replacing-useeffect-with-key-changes-in-react-no-seriously-d1b83ec6dc29

The Key to Performance: Replacing useEffect with Key Changes in React (No, Seriously)

 

https://velog.io/@yeonbot/React에서-key의-역할-컴포넌트를-다시그리는-과정

React에서 key의 역할, 컴포넌트를 다시그리는 과정(reconciliation)