DOM 操作

Next.js で、最初に戸惑うのは、DOM 操作の方法です。DOM とは、Document Object Model の略で、HTML や XML のようなマークアップ言語で記述された文書の構造を表す方法です。

基本的に、React で querySelector など、直接 DOM を操作することは NGです。

React から querySelector などのメソッドを使って直接 DOM を操作することは推奨されません。

以下は、useEffect を使った例です。

import React, { useState, useEffect } from 'react'

export default function Timer() {
  const [time, setTime] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1)
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  }, [time])

  return (
    <div>
      <h1>{time}</h1>
    </div>
  )
}

React では JSX コードを使って HTML を作成するため、DOM 要素にアクセスするには ref システムを使う必要があります。

import React, { useRef } from 'react'

function App() {
  const inputRef = useRef(null)

  const handleClick = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus</button>
    </div>
  )
}

← ISR Next.js チュートリアルTOP Prisma の設定 →