서버 함수(서버 액션) 정의react 공식문서2024년 9월까지 모든 서버 함수를 "서버 액션"이라고 불렀습니다. 서버 함수가 액션 속성으로 전달되거나 액션 내부에서 호출되면 서버 액션이 되지만, 모든 서버 함수가 서버 액션인 것은 아닙니다. 위의 내용을 바탕으로 해석해 보면 서버 함수는 큰 개념이고, 서버 액션은 그 안의 특수한 실행 방식이다. 현재 서버 함수는 폼 action 뿐만 아니라 클라이언트 이벤트 핸들러에서도 호출되어 다양하게 사용되고 있다.서버 함수(Server Function): 서버에서 실행되는 모든 함수서버 액션(Server Action): 서버 함수 중에서 `` 을 통해 호출되는 함수 사용하는 방식은 아래의 공식문서를 참고https://nextjs.org/docs/app/buildi..

Form 관련 Hooks 비교Next.js와 React에서 제공하는 폼 관련 Hooks들의 차이점과 사용법을 알아보자. 1️⃣ useFormStatus가장 단순한 형태의 Hook으로, 폼의 제출 상태만을 추적한다.import { useFormStatus } from "react-dom";import action from './actions';export default function App() { return ( );}function Submit() { const status = useFormStatus(); return Submit}pendding: 폼 제출 중인지 여부 확인data: 상위 form에서 제출한 데이터의 정보 method: 'GET' or "POST' 중 ..

Next.js 13에서 도입된 RSC(React Server Component)에 대해 알아보자. RSC(React Server Components)와 RCC(React Client Component) RSC는 React 18에서 실험적으로 도입되었으며, React 19부터 정식으로 지원되는 새로운 렌더링 방식이다. 기존 우리가 사용하던 컴포넌트는 모두 RCC로, 클라이언트 환경에서 렌더링 되었다. 그러나 이제는 RSC를 통해 컴포넌트를 서버에서 렌더링 할 수 있게 되면서, 서버와 클라이언트의 실행 위치를 명확하게 구분할 수 있게 되었다. 그렇다면, 서버와 클라이언트의 실행 위치를 구분 짓게 되면서 생긴 주요 개선점이 무엇일까? 1️⃣ 클라이언트 번들 사이즈 최적화(Zero-bundle-size c..