웹 브라우저 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분하는 법 With React & TypeScript

웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다.

1
2
3
4
5
6  const navInfo = performance.getEntriesByType(
    "navigation"
  )[0] as PerformanceNavigationTiming;
  
  console.log(navInfo);
  console.log(navInfo.type);

먼저 navInfo의 console.log입니다.

navInfo 데이터에서 제가 사용한 값은 type 속성입니다.

type은 아래와 같은 규칙을 따릅니다.

• 링크이동: navigate
• 뒤로 가기: back_forward
• 새로고침: reload

이 정보를 활용해서 분기처리할 생각입니다.