react 에서 페이지 이동 시, 동적 추가한 스크립트 제거하는 방법 없을까요?

Question

각 페이지에서 useEffect 로 스크립트 호출합니다.스크립트는 다음과 같고,const scriptWidget1 &#61; document.createElement('script'); const scriptWidget2 &#61; document.createElement('script'); export const loadScriptWidget1 &#61; () &#61;> { if ( scriptWidget2.text ) { scriptWidget2.text &#61; ''; scriptWidget2.async &#61; true; scriptWidget2.parentNode.removeChild(scriptWidget2); } scriptWidget1.text &#61; &#96; vreviewWidget.initialize({ uuid: '키1', originMemberId: this.member ? this.member.mbrNo : undefined, }); &#96;; scriptWidget1.async &#61; true; document.body.appendChild(scriptWidget1); }; export const loadScriptWidget2 &#61; () &#61;> { if ( scriptWidget1.text ) { scriptWidget1.text &#61; ''; scriptWidget1.async &#61; true; scriptWidget1.parentNode.removeChild(scriptWidget1); } scriptWidget2.text &#61; &#96; vreviewWidget.initialize({ uuid: '키2', originMemberId: this.member ? this.member.mbrNo : undefined, }); &#96;; scriptWidget2.async &#61; true; document.body.appendChild(scriptWidget2); };특정 클래스 다음 요소에 iframe이 생성됩니다.생성된 iframe src에 키 값이 들어가 있습니다.문제는 useEffect가 컴포넌트라 로드된 후라서이미 스크립트가 생성된게 유지되어서 화면 그린 후useEffect 가 동작해서요소검사 하면 스크립트에 키 값을 바겼지만화면은 이미 그려져서 이거를 어떻게 해야 할지 모르겠습니다....react 나 vue 용 버전 없는지 업체에 문의를 해봐야 하는지...

몰랑토끼 · Answer

uselayouteffect 써도 그러나요

kdk1026 · Answer

document.body.appendChild 한 후, 제거를 해도 Link to 로 이동하면 uuid 처음에 로드되었던 것만 iframe 가져와버리네요... 일단 업체에 메일로 문의는 해놓은 상태입니다...

하얀뼈 · Answer

const scriptWidget1 = document.createElement('script'); const scriptWidget2 = document.createElement('script');여기다가 id 추가하고 remove() 메소드 쓰면 되겠네요

kdk1026 · Answer

SPA 처리방법이나 SPA용으로 받아야 겠네요...페이지 로드 시점에 생성되버리네요...다음과 같이 스크립트 1개해놓고, 각 컴포넌트에서 useEffect 시점에 호출하는데유유아이디 바뀐거는 확인되는데... 정작 생성된 iframe은 동일하네요...네트워크 탭으로 보니 확실하네요...페이지 새로고침 해야 동적 추가한 스크립트 로드되고, Link to로 이동할때는 안나오네요.....const script &#61; document.createElement('script'); export const load1 &#61; () &#61;> { script.src &#61; &#96;https://script.vreview.tv/vreview.widget.js?vrid&#61;유유아이디1&#96;; script.async &#61; true; document.querySelector('.App').appendChild(script); }; export const load2 &#61; () &#61;> { script.src &#61; &#96;https://script.vreview.tv/vreview.widget.js?vrid&#61;유유아이디2&#96;; script.async &#61; true; document.querySelector('.App').appendChild(script); };

kdk1026 · Answer

SPA 권장은 아니겠지만 해결했습니다.state 도 리로드 되면 초기 값 읽혀서 sessionStorage 이용했네요.각각 함수 만들어서 useEffect 에서 스크립트 로드 다음에 호출1번 페이지 const processReload = () => { if ( !sessionStorage.getItem('review1') || sessionStorage.getItem('review1') === 'false' ) { window.location.reload(); sessionStorage.setItem('review1', true); sessionStorage.setItem('review2', false); } };2번 페이지 const processReload = () => { if ( !sessionStorage.getItem('review2') || sessionStorage.getItem('review2') === 'false' ) { window.location.reload(); sessionStorage.setItem('review2', true); sessionStorage.setItem('review1', false); } };

react 에서 페이지 이동 시, 동적 추가한 스크립트 제거하는 방법 없을까요?

5개의 답변

#iframe 목록