Script API (후속처리 메서드) (1)

후속 처리 메서드

onLoad

•

onLoad 는 beforeInteractive와 함께 사용할 수 없음 (대신 onReady를 사용해야 함)

•

타사 스크립트 로드가 완료된 후 사용자가 자바스크립트 코드를 한 번 실행하는 경우 (ex. lodash)

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
        onLoad={() => {
          console.log(_.sample([1, 2, 3, 4]))
        }}
      />
    </>
  )
}
JavaScript
복사

[Appendix] lodash의 sample 매서드

•

collection에서 random 하게 요소 하나를 추출

Lodash Documentation

https://lodash.com/docs/#sample

[Question - 오늘 내용과 직접관련 X] 환수님 이전에 프로젝트에서 lodash를 걷어내느라 고생했다 하셨는데 tree-shaking 하면 용량이 얼마 안되지 않을 것 같은데, 전체적으로 걷어낸 상황을 조금 더 설명해 주실 수 있을까요? 갑자기 lodash랑 스크립트 내용을 보니 생각나셔요

onReady

•

스크립트가 처음 로드될 때 코드를 실행

•

이후 컴포넌트가 다시 마운트될 때마다 onReady 속성을 사용하여 코드를 실행

'use client'
 
import { useRef } from 'react'
import Script from 'next/script'
 
export default function Page() {
  const mapRef = useRef()
 
  return (
    <>
      <div ref={mapRef}></div>
      <Script
        id="google-maps"
        src="https://maps.googleapis.com/maps/api/js"
        onReady={() => {
          new google.maps.Map(mapRef.current, {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8,
          })
        }}
      />
    </>
  )
}
JavaScript
복사

onError

•

스크립트가 로드되지 않았을 때 onError 프로퍼티로 처리

'use client'
 
import Script from 'next/script'
 
export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onError={(e: Error) => {
          console.error('Script failed to load', e)
        }}
      />
    </>
  )
}
JavaScript
복사