블로그를 준비하고 있어요
잠시만 기다려주세요...
이렇게 하면 최초에 컴포넌트가 마운트되고 스크립트가 로드 되면 scriptLoad의 상태가 false에서 true로 잘 변환된다.
문제는 한번 스크립트가 한번 로드되고 다시 컴포넌트가 마운트 될 때이다.
기본적으로 Script 컴포넌트는 한번 마운트 되고나면 사용자가 Nextjs 내의 여러 경로로 이동하더라도 단 한번의 스크립트 로드를 보장한다.
따라서 해당 페이지를 한번 방문 후, 재방문할 때 스크립트가 이미 로드되어 있으므로 useState의 상태가 변경되지 않는다.
아무리 검색해도 해결방법을 찾을 수 없어서 Script 컴포넌트에 대한 Nextjs의 공식문서를 확인해 보았다.
Script 컴포넌트는 총 5개의 프롭을 받을 수 있다.
src : 스크립트 경로
strategy : 로딩 동장 미세 조정. 서버에서만 사용 가능.
onLoad : 스크립트 로드가 완료된 후 실행
onReady : 스크립트 로드가 완료되고 컴포넌트가 마운트 될 때마다 실행
onError : 스크립트 로드가 실패하면 실행
이 중에서 나는 onLoad를 썼기 때문에 최초에 스크립트가 로드될 때만 상태변화가 일어났던 것.
그냥 간단하게 onLoad를 onReady로 바꾸면 해결된다.
...
export default function Page() {
...
<Script
src="https://example.com/sample.js"
onReady={() => setScriptLoad(true)}
/>
...이것 하나 때문에 몇 시간을 고민했는지 모르겠다.
AI를 통해 의문을 해결하려고 했으나, 클로드도 챗지피티도 모두 explore 시절의 코드를 말하며 헛소리만 해대니 답답했다.
옆에서 누군가 끌어주는 사람이 있었으면 좋겠다는 생각이 절실하게 드는 하루였다.
댓글을 불러오는 중...