React에서 브라우저의 뒤로가기 버튼 이벤트 감지

React에서 브라우저의 뒤로가기 버튼 이벤트 감지

브라우저의 뒤로가기, 앞으로가기 버튼 이벤트 감지를 정리한 글입니다.

React Router를 이용한 페이지 처리 시 발생하는 문제점

React router에서 파라미터로 페이지를 구분하는 경우, 브라우저의 뒤로가기 버튼을 눌렀을 때 파라미터에 반응하여 페이지가 이동하는 경우가 있습니다.

// url : /detail
array.map((value) => <Link to={`/detail/${value.id}`} />);

예를 들어 위와 같이 array 원소들의 id를 이용해 페이지 처리하고 id가 1, 2, 3 순서로 차례로 이동할 때 경로는 순서대로/detail/1, /detail/2, /detail/3로 이동합니다.

직접 만든 뒤로가기 버튼(브라우저의 뒤로가기 버튼이 아닌)을 이용한다면 history.push('/detail')과 같이 이벤트를 설정해 /detail 페이지로 이동할 수 있습니다.

하지만 브라우저의 뒤로가기 버튼으로 페이지를 이동한다면 현재 페이지 /detail/3 에서 /detail이 아닌 /detail/2, /detail/1로 이동하게 됩니다.

history 객체를 이용한 해결

const [locationKeys, setLocationKeys] = useState([]);

useEffect(() => {
  // 뒷정리 함수 이용
  return history.listen((location) => {
    1️⃣if (history.action === "PUSH") {
      2️⃣setLocationKeys([location.key]);
    }

    3️⃣if (history.action === "POP") {
      4️⃣if (locationKeys[1] === location.key) {
        setLocationKeys(([_, ...keys]) => keys);

        // 앞으로 가기
      } else {
        5️⃣setLocationKeys((keys) => [location.key, ...keys]);

        // 뒤로 가기
        6️⃣history.push("/detail");
      }
    }
  });
}, [locationKeys, history]);

1. 현재의 action이 'push' 일 때, 즉 Link 태그를 이용하여 이동할 때의 action입니다.
2. location.key를 이용하여 locationKeys 배열에 key를 저장해 놓습니다.
3. 현재의 action이 'pop' 일 때, 즉 브라우저의 앞, 뒤, 새로고침 버튼을 누를 때 발생하는 action 입니다.
4. 앞으로 가기의 locationKeys가 없으면 발생하지 않습니다.
5. 앞으로 가는 locationKeys가 없는 경우, 자연스럽게 pop action은 뒤로가기 버튼과 새로고침 버튼 이벤트에 동작합니다.
   앞으로 가는 key를 locationKeys 배열의 [1] 인덱스에, 이벤트가 동작 후의 location.key를 [0] 인덱스에 저장합니다. ( 앞으로 이동하기 위해)
6. 뒤로가기, 새로고침 버튼 이벤트가 감지 되었을 때 이동할 경로를 지정합니다.

참고

histroy 객체