프로젝트 TIL (2) - [ window.location.replace() ]
오늘 한 일 🤪
오늘은 리액트로 MyLibrary 페이지를 구현하면서 데이터가 바뀜에 따라 화면에 새로고침이 필요한 부분에 대하여 어떻게 코드를 작성해야 할 까 고민을 하다가 window.location.replace() 라는 메서드를 처음 사용해보았습니다..
먼저 제가 구현하고자 했던 것은 내 서재에 있는 책을 삭제했을 때 삭제한 책을 뺀 나머지 책을 다시 UI로 MyLibrary 페이지에 바로바로 보여주고 싶었습니다. 저는 이 과정을 작성하면서 다음과 같은 과정을 거치게 되었습니다.
- useEffect를 사용하여 특정 Props가 바뀔 때, 리렌더링 시키기
- history.push()를 사용하여 페이지 이동시키기
- window.location.replace("/MyLibrary") 를 통해 새로고침 효과 내기
먼저 3번같은 경우는 처음 history.push()를 구글링할 때 오며가며 봤던 메서드였는데 그 때는 필요하지 않아서 그냥 지나쳤었습니다.
어떻게하면 새로고침하는 효과를 낼 수 있을까 하고 고민하던 중 문득 구글링하며 봤었던 이 메서드가 떠올라서 코드에 적용시키니 내가 원하던대로 작동은 하지만 이게 어떤 메서드인지 알아볼 필요가 있었습니다.
window.location.replace()
먼저 이 메서드를 간략하게 표로 정리해보면 다음과 같습니다.
| window.location.replace() | |
| 기능 | 기존페이지를 새로운 페이지로 변경 |
| 형태 | 메서드 |
| 주소 히스토리 | 기록되지 않음 |
| 사용 예 | location.replace("./MyLibrary"); |
왜 이 메서드를 사용하기로 결정했는지까지의 이유를 들자면
- 기존 페이지를 "새로운 페이지" 로 변경하는 것은 아니지만 "새로운 데이터를 받아와 이전과 다른 새로운 페이지" 라고 생각한다면 완전 다른 문제는 아니라고 생각했기에 적용
- 새로 받아온 데이터를 가지고 페이지를 보여준 후에 뒤로가기를 눌러 이전 페이지로 갈 필요는 없기 때문에 주소 히스토리가 기록되지 않는다는 점
- history를 사용하기 위해 import로 불러오고 withRouter로 컴포넌트를 래핑해야하는 번거로움 없이 바로 사용할 수 있어서 간편하다!
적절한 이유일지는 모르겠지만 책 삭제를 누른 후 state값이 변경되는 것도 없을 뿐더러 페이지 리렌더링을 위해 새로운 state를 만드는 것은 불필요하다고 생각했고 지금 내가 작성한 코드에서는 이 방법이 가장 최선이라고 생각했습니다.
만약 다른 방법으로 구현해본다면 ?
지금 제 프로젝트에서 이 방법말고 다른 방법을 적용해본다고 하면 useEffect를 통해 렌더링 되기 전 dispatch를 통해 서버에서 내 도서 목록을 받아오는 작업을 한 후, 리덕스 스토어에 상태를 저장하는 방법이 있을 것 같습니다.
그래서 책을 삭제하면 리덕스 스토어에 삭제 된 책을 뺀 나머지 목록들을 업데이트 시켜줌으로써 컴포넌트의 리렌더링을 발생시킬 수 있을 것 같습니다.
하지만 이 방법을 사용하지 않는 이유는 해당 state는 리덕스를 사용하여 상태관리를 해야 할 필요가 없을 뿐더러 단지 내가 지금 겪고 있는 문제를 해결하기 위해서 리덕스 모듈을 하나 더 생성한다는 것은 효율적이지 못하다고 생각했기 때문입니다.
내가 생각하기에 이 메서드를 사용하면 좋을 것 같은 때는 ?
로그인페이지에서 로그인 후 뒤로가기 버튼을 눌렀을 때 로그인 페이지가 다시 나오지 않기를 바란다면 window.location.replace() 메서드가 적합하다고 생각합니다.
실제로 로그인 페이지를 구현하면서 browser history를 조작하는데 로그인을 한 사용자가 뒤로가기 버튼을 눌러 로그인 페이지를 다시 보는 것은 적절하지 않다고 생각해서 여러 사이트들을 참고한 결과 뒤로가기를 눌렀을 때 로그인 페이지가 나오는 사이트가 많은 것을 보고 UI적으로 이상한 것은 아닌 것 같다라는 판단을 내려 일단 제 프로젝트에서는 history.push() 를 사용하고 있습니다.
위와 같은 경우처럼 뒤로가기를 통해 이전에 방문했던 페이지를 다시 방문하지 않게 하고 싶다면 window.location.replace() 메서드를 사용하면 좋을 것 같습니다.
마치며
분명 더 좋은 방법이 있을 것 같습니다. 아니 있습니다............ 저 메서드를 사용하면서 아직 찝찝함이 남아있기 때문에...
책을 삭제할 때마다 리렌더링을 할 것이고 리렌더링이 되면 useEffect를 통해 계속해서 서버에 데이터를 요청하고 있는데 이 작업이 과연 맞는 것일까 하는 생각이 듭니다.
그래도 이번 기회를 통해 history.push(), window.location.replace() 등등 페이지 이동에 대한 지식을 공부할 수 있게 되어 좋았던 삽질? 이었던 것 같습니다!!
참고했던 레퍼런스
https://stackoverflow.com/questions/40210673/whats-the-different-between-browserhistory-push-and-location-replace
https://stackoverflow.com/questions/47583856/window-location-href-vs-history-pushstate-which-to-use/47583989
( 프로젝트를 하며 구글링은 계속 할테니 오며가며 보이는 페이지 이동 관련 이슈를 더 눈여겨 보고 북마크하여 모아놓아야 겠다.....😂)