[javascript] Next.js에서의 유저 인터랙션 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

클라이언트 사이드 라우팅 - Next.js는 자체적으로 내장된 라우터를 제공하여 클라이언트 사이드에서 라우팅을 처리할 수 있습니다. Link 컴포넌트를 사용하여 페이지 간의 이동을 자연스럽게 처리할 수 있습니다.

import Link from "next/link";

function HomePage() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Link href="/about">
        <a>소개 페이지로 이동</a>
      </Link>
    </div>
  );
}

폼 처리 - 유저의 입력을 받기 위한 폼 처리는 모든 웹 애플리케이션에서 중요합니다. Next.js는 <form> 요소를 사용하여 폼을 처리할 수 있으며, submit 이벤트를 통해 폼 데이터를 처리할 수 있습니다.

import { useState } from "react";

function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // 폼 데이터 처리 로직
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <button type="submit">전송</button>
    </form>
  );
}

API 호출 - Next.js는 서버 사이드에서 API를 호출할 수 있는 기능을 제공합니다. getServerSideProps 또는 getStaticProps 함수를 통해 API를 호출하고 데이터를 프론트엔드로 전달할 수 있습니다.

export async function getServerSideProps() {
  const res = await fetch("API_URL");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

function HomePage({ data }) {
  // 데이터 활용 로직
  return <div>{/* 내용 표시 */}</div>;
}

Next.js에서 유저 인터랙션을 처리하는 방법은 다양하지만, 클라이언트 사이드 라우팅, 폼 처리, API 호출을 통해 강력한 인터랙티브 웹 애플리케이션을 개발할 수 있습니다. 자세한 내용은 Next.js 공식 문서를 참조하시기 바랍니다.