M

MLOG

한국어

React Server Actions를 살펴보고, 폼 제출 및 데이터 변경을 서버에서 직접 처리하여 React 개발을 단순화하고 보안을 강화합니다.

React Server Actions: 간소화된 서버 측 폼 처리

React 18에 도입되고 Next.js에서 크게 향상된 React Server Actions는 폼 제출 및 데이터 변경을 서버에서 직접 처리하는 혁신적인 접근 방식을 제공합니다. 이 강력한 기능은 개발 프로세스를 단순화하고, 보안을 강화하며, 기존 클라이언트 측 데이터 가져오기 및 조작에 비해 성능을 향상시킵니다.

React Server Actions란 무엇인가요?

Server Actions는 서버에서 실행되며 React 컴포넌트에서 직접 호출할 수 있는 비동기 함수입니다. 이를 통해 다음과 같은 서버 측 작업을 수행할 수 있습니다:

Server Actions의 핵심 장점은 React 컴포넌트 내에서 서버 측 코드를 작성할 수 있다는 것으로, 별도의 API 라우트와 복잡한 클라이언트 측 데이터 가져오기 로직이 필요 없다는 것입니다. UI와 서버 측 로직의 이러한 공동 배치는 더 유지 관리하기 쉽고 효율적인 코드베이스로 이어집니다.

React Server Actions 사용의 이점

React Server Actions를 사용하면 다음과 같은 여러 가지 상당한 이점을 얻을 수 있습니다:

간소화된 개발

Server Actions는 React 컴포넌트 내에서 폼 제출 및 데이터 변경을 직접 처리할 수 있도록 하여 보일러플레이트 코드를 줄여줍니다. 별도의 API 엔드포인트와 복잡한 클라이언트 측 데이터 가져오기 로직이 필요 없어 개발 프로세스를 간소화하고 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다. 간단한 문의 폼을 생각해 보세요. Server Actions가 없으면 폼 제출을 처리할 별도의 API 라우트, 데이터를 보내는 클라이언트 측 JavaScript, 그리고 클라이언트와 서버 모두에서 오류 처리 로직이 필요합니다. Server Actions를 사용하면 이 모든 것을 컴포넌트 자체 내에서 처리할 수 있습니다.

향상된 보안

서버에서 코드를 실행함으로써 Server Actions는 애플리케이션의 공격 표면을 줄여줍니다. 민감한 데이터와 비즈니스 로직은 클라이언트에서 멀리 떨어져 악의적인 사용자가 이를 조작하는 것을 방지합니다. 예를 들어, 데이터베이스 자격 증명 또는 API 키는 클라이언트 측 코드에 절대 노출되지 않습니다. 모든 데이터베이스 상호 작용은 서버에서 발생하여 SQL 삽입 또는 무단 데이터 액세스 위험을 완화합니다.

향상된 성능

Server Actions는 클라이언트에서 다운로드하고 실행해야 하는 JavaScript 양을 줄여 성능을 향상시킬 수 있습니다. 이는 특히 저사양 기기나 느린 인터넷 연결을 가진 사용자에게 유익합니다. 데이터 처리는 서버에서 수행되고, 필요한 UI 업데이트만 클라이언트로 전송되어 더 빠른 페이지 로드와 더 부드러운 사용자 경험을 제공합니다.

낙관적 업데이트

Server Actions는 React의 Suspense 및 Transitions와 원활하게 통합되어 낙관적 업데이트를 가능하게 합니다. 낙관적 업데이트를 사용하면 서버가 작업을 확인하기 전에 UI를 즉시 업데이트할 수 있습니다. 사용자가 작업 결과를 보기 전에 서버 응답을 기다릴 필요가 없으므로 더 반응적이고 매력적인 사용자 경험을 제공합니다. 전자 상거래에서 쇼핑 카트에 항목을 추가하는 것은 서버가 백그라운드에서 추가를 확인하는 동안 즉시 표시될 수 있습니다.

점진적 향상

Server Actions는 점진적 향상을 지원합니다. 즉, JavaScript가 비활성화되거나 로드에 실패하더라도 애플리케이션이 계속 작동할 수 있습니다. JavaScript가 비활성화되면 폼은 기존 HTML 폼으로 제출되며, 서버는 제출을 처리하고 사용자를 새 페이지로 리디렉션합니다. 이를 통해 애플리케이션은 브라우저 구성 또는 네트워크 조건에 관계없이 모든 사용자에게 접근성을 유지합니다. 이는 접근성과 SEO에 특히 중요합니다.

React Server Actions 사용 방법

React Server Actions를 사용하려면 Next.js와 같이 이를 지원하는 프레임워크를 사용해야 합니다. 다음은 단계별 가이드입니다:

1. 서버 액션 정의

서버에서 실행될 비동기 함수를 만듭니다. 이 함수는 데이터베이스 업데이트 또는 API 호출과 같이 서버에서 실행하려는 로직을 처리해야 합니다. 함수가 서버 측 함수임을 나타내기 위해 맨 위에 `'use server'` 지시어를 표시합니다. 이 지시어는 React 컴파일러에게 함수를 서버 측 함수로 취급하고 클라이언트와 서버 간의 데이터 직렬화 및 역직렬화를 자동으로 처리하도록 지시합니다.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // 경로 캐시 새로 고침
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

설명:

2. 컴포넌트에서 서버 액션 가져와 사용하기

React 컴포넌트에서 Server Action을 가져와 폼 요소의 `action` prop으로 사용합니다. `useFormState` 훅을 사용하여 폼의 상태를 관리하고 사용자에게 피드백을 표시할 수 있습니다.

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

설명:

3. 폼 데이터 처리

Server Action 내에서 `FormData` API를 사용하여 폼 데이터에 액세스할 수 있습니다. 이 API는 폼 필드의 값에 액세스하는 편리한 방법을 제공합니다.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. 오류 처리

Server Action 실행 중에 발생할 수 있는 오류를 처리하려면 `try...catch` 블록을 사용합니다. 상태 객체에서 오류 메시지를 반환하여 사용자에게 표시합니다.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. 데이터 새로 고침

Server Action이 데이터를 성공적으로 변경한 후에는 UI가 최신 변경 사항을 반영하도록 데이터 캐시를 새로 고쳐야 할 수 있습니다. `next/cache`의 `revalidatePath` 또는 `revalidateTag` 함수를 사용하여 특정 경로 또는 태그를 새로 고칩니다.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // 경로 캐시 새로 고침
  // ...
}

고급 사용법

데이터 변경

Server Actions는 데이터베이스 또는 외부 API 업데이트와 같은 데이터 변경에 특히 적합합니다. Server Actions를 사용하여 데이터 유효성 검사, 계산 수행 또는 여러 데이터 소스와의 상호 작용과 같이 서버 측 로직이 필요한 복잡한 데이터 변경을 처리할 수 있습니다. 사용자 프로필을 업데이트하고 확인 이메일을 보내야 하는 시나리오를 생각해 보세요. Server Action은 데이터베이스 업데이트와 이메일 전송 프로세스를 단일 원자적 작업으로 처리할 수 있습니다.

인증 및 권한 부여

Server Actions는 인증 및 권한 부여를 처리하는 데 사용될 수 있습니다. 서버에서 인증 및 권한 부여 검사를 수행함으로써 승인된 사용자만 민감한 데이터 및 기능에 액세스할 수 있도록 할 수 있습니다. Server Actions를 사용하여 사용자 로그인, 등록 및 비밀번호 재설정을 처리할 수 있습니다. 예를 들어, Server Action은 사용자 자격 증명을 데이터베이스와 비교하고 후속 요청을 인증하는 데 사용할 수 있는 토큰을 반환할 수 있습니다.

엣지 함수

Server Actions는 사용자와 가까운 전역 서버 네트워크에서 실행되는 엣지 함수로 배포될 수 있습니다. 이렇게 하면 대기 시간을 크게 줄이고 성능을 향상시킬 수 있으며, 특히 지리적으로 분산된 사용자의 경우 더욱 그렇습니다. 엣지 함수는 낮은 대기 시간이 필요한 Server Actions(예: 실시간 데이터 업데이트 또는 개인화된 콘텐츠 제공)를 처리하는 데 이상적입니다. Next.js는 Server Actions를 엣지 함수로 배포하기 위한 내장 지원을 제공합니다.

스트리밍

Server Actions는 사용 가능한 데이터 청크를 클라이언트로 전송할 수 있는 스트리밍을 지원합니다. 이는 특히 실행 시간이 오래 걸리는 Server Actions의 경우 애플리케이션의 인식 성능을 향상시킬 수 있습니다. 스트리밍은 대규모 데이터 세트 또는 복잡한 계산을 처리하는 데 특히 유용합니다. 예를 들어, 검색 결과를 데이터베이스에서 검색하는 대로 클라이언트로 스트리밍하여 보다 반응적인 사용자 경험을 제공할 수 있습니다.

모범 사례

React Server Actions를 사용할 때 따라야 할 몇 가지 모범 사례는 다음과 같습니다:

실제 사례

다양한 유형의 애플리케이션에서 React Server Actions를 사용할 수 있는 몇 가지 실제 사례를 살펴보겠습니다:

전자 상거래 애플리케이션

소셜 미디어 애플리케이션

콘텐츠 관리 시스템(CMS)

국제화 고려 사항

전 세계 사용자를 대상으로 애플리케이션을 개발할 때 국제화(i18n) 및 현지화(l10n)를 고려하는 것이 중요합니다. 국제화된 애플리케이션에서 React Server Actions를 사용할 때 고려해야 할 사항은 다음과 같습니다:

예를 들어, 날짜 입력을 요구하는 폼을 처리할 때 Server Action은 `Intl.DateTimeFormat` API를 사용하여 사용자의 로캘에 따라 날짜를 구문 분석하여 사용자의 지역 설정에 관계없이 날짜가 올바르게 해석되도록 할 수 있습니다.

결론

React Server Actions는 React 애플리케이션에서 서버 측 폼 처리 및 데이터 변경을 단순화하는 강력한 도구입니다. Server Actions를 사용하면 React 컴포넌트 내에서 직접 서버 측 코드를 작성할 수 있으므로 보일러플레이트 코드를 줄이고 보안을 강화하며 성능을 향상시키고 낙관적 업데이트를 가능하게 합니다. 이 가이드에 설명된 모범 사례를 따르면 Server Actions를 활용하여 더 강력하고 확장 가능하며 유지 관리 가능한 React 애플리케이션을 구축할 수 있습니다. React가 계속 발전함에 따라 Server Actions는 의심할 여지 없이 웹 개발의 미래에서 점점 더 중요한 역할을 할 것입니다.