[Next.js] 데이터 변이

양식 제출 처리 방법

1. 분리된 독립형 백엔드 API

양식 데이터를 포함한 요청을 받아들이고 그 데이터를 데이터베이스에 저장

 

2. 통합된 Next.js 애플리케이션 => 서버 액션

양식을 직접 제출받고 데이터베이스에 데이터 저장

 

 

폼 액션 설정

서버 액션 없이 그냥 formAction으로 제출 처리도 가능

form에 action 프로퍼티를 사용해 함수 전달 가능

action은 React를 쓰지 않고도 양식 요소에 설정 가능한 기본 속성

양식 요소에서 React를 사용하지 않거나 formAction 기능을 지원하지 않는 React 버전을 사용할 경우에는 양식 요소에 설정되는 액션 속성이 URL을 정의한다

NextJS를 사용하는 경우에 action 속성은 URL 대신 함수를 받아들이고 브라우저 기본 동작을 막아 URL로 요청 전송을 막으면서 양식이 제출될 때 그 함수를 작동시킨다

React가 formData 객체를 제공해 자동으로 그 객체를 action에 전달한 함수에 인자로 전달 -> 양식의 입력란에 입력된 데이터 추출 가능

formData는 다양한 메소드를 포함한 객체를 정의한다

ex) get 메소드 -> 사용자가 입력한 다양한 입력값 얻기 가능

formAction을 사용할 때는 값을 추출하려는 모든 입력값에 이름 속성을 설정해야 한다

<input type="text" id="title" name="title" />

-> 여기서 name처럼 이름 속성 설정하고 get메소드에서 이름값 사용

function createPost(formData) {
  const title = formData.get('title');
  const image = formData.get('image');
}

 

 

서버 액션

서버 액션 React 기능은 NextJS같은 프레임워크로 활성화된다

함수 안에 "use server"를 추가해 서버 액션임을 알려야 한다

서버 액션은 비동기 함수여야 하기 때문에 함수 앞에 비동기 키워드 async 추가

async function createPost(formData) {
    "use server";
    const title = formData.get('title');
    const image = formData.get('image');
    const content = formData.get('content');

    console.log(title, image, content);

    storePost({
      imageUrl: '',
      title,
      content,
      userId: 1
    })
  }

 

데이터베이스에 데이터 저장

storePost({
      imageUrl: '',
      title,
      content,
      userId: 1
    })

 

redirect 함수를 호출해 다른 페이지로 리다이렉션 가능

useFormState 훅을 사용하면 양식의 제출 상태에 대한 다양한 정보를 얻을 수 있다

useFormState로 얻은 상태 객체에는 보류 중인 속성이 포함되는데 양식이 제출 중인지 여부를 불리언값으로 알려준다

const status = useFormStatus();

if (status.pending) {
    return <p>Creating post...</p>;
  }

 

'use server'는 서버 측 실행을 보장하지 않는다

서버 액션이 되어야 할 것을 NextJS에게 말하기만 할뿐!

 

기본적으로 NextJS는 데이터를 강력하게 캐시하고 데이터의 변경 사항을 감지하지 않는다

revalidatePath 함수는 데이터를 변경할 때마다 호출해야 하는 함수

특정 페이지로 가는 경로를 정의할 수 있는데 그 루트를 방문할 때마다 업데이트된 버전이 제공된다

revalidatePath("/", "layout");

이렇게 하면 루트 레이아웃에 감싸진 모든 페이지가 재검증된다

 

 

useOptimistic 훅을 활용해 낙관적 업데이트 수행 가능