구현한 기능
메인페이지에 있는 영상리스트 중 하나를 클릭하면
해당 페이지로이동하게끔 구현했다.
해당 영상페이지에는 관련영상 리스트를 가지고 있어서 클릭시 해당 파람스를 가지고 해당 페이지로 이동을 하게 된다.
문제점
메인에서 영상 하나를 클릭했을때, 뒤로가기를 누르면 메인페이지로 이동을 잘 한다.
하지만, 메인페이지 영상클릭 => 영상페이지에서 관련영상클릭 하는경우
(예를 들어 url이동이 /main => /v=1 => /v=3 )
/v=3 에서 뒤로가기를 클릭하면 iframe부분만 1번째 영상이 뜨고,
한번더 뒤로가기를 클릭해주어야 온전한 /v=1 페이지로 이동을 한다.
해결과정
-
처음에는 페이지 안에 구현한 뒤로가기 버튼이 문제라고 생각했다.
usenavigation을 이용해서 navigate('-1').
한참 react-router-dom v6이슈만 찾아봤다.
그런데 크롬에 있는 뒤로가기를 눌러도 같은 이슈가 발생..
네비게이트의 문제가 아니었다. -
첫번째 클릭시 iframe안에 영상은 먼저 바뀌었다가, 두번째 클릭시 온전히 이전페이지로 이동하는 이슈라서 iframe이슈를 한참 구글링했다.
결국 찾아낸건 매우 간단하게 unique key prop의 문제..
아래 레퍼런스 페이지를 참고하자면,
Notice that the iframe has a dynamic src attribute, meaning its content changes as you navigate to a different page in the app. You're always working with the same iframe, though; it's just re-rendering and pointing to a different URL.
즉,iframe이 dynamic src속성을 가지고 있고 => iframe이 리렌딩이 되어버린다는것
자바스크립트에선 iframe을 교체하는 방식으로 iframe을 사용하는데,
리액트에서는 key프롭만 주면 해결이 가능하다고 한다.
iframe이 있으면 src가 변경될때마다 다시 아이프레임이 리렌딩 되어버리는 현상이 일어난다. -> 해결을 우ㅟ해서는 iframe만 렌더링 하는 것이 아니라 페이지 전체를 다시 마운트 해야한다.
고유한 키값을 줌으로 인해서 렌더링할때 논리적으로 동일한지 여부를 체킹할 수 있다고 한다는것.
key프롭이 매핑한 데이터에서만 필요한건지 알았는데, 페이지 강제 마운트 위해서도 키가 필요하다.. 시간이 없어서 결과만 나열한 포스팅이지만, 나중에 시간날때 키프롭에 대해 공부해서 정리해두어야 겠다....
https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/
