Frontend/NextJS (2) 썸네일형 리스트형 Next.js에서 useFormState를 활용한 폼 상태 관리 Next.js 13 이후부터 본격적으로 도입된 App Router와 함께, 서버 액션(Server Actions)을 사용하는 방식이 점점 익숙해지고 있습니다. 그 과정에서 자주 마주치게 되는 훅이 하나 있는데요, 바로 useFormState입니다.이번 글에서는 useFormState가 어떤 역할을 하는지, 그리고 어떻게 사용하면 좋을지 정리해보려고 합니다.기존 방식 vs 서버 액션 기반 폼 처리기존 React 방식에서 폼 처리는 주로 클라이언트에서 useState를 써서 입력 값을 관리하고,onSubmit에서 API 요청을 보내는 방식이 일반적이었습니다. 하지만 서버 액션을 쓰게 되면 폼의 전송과 처리를 서버 측에서 바로 할 수 있기 때문에 구조 자체가 달라집니다.여기서 useFormState는 폼 전송.. [NextJS 15] 이미지 최적화 const Image from "next/image" 1) nextjs 는 기본적으로 lazy loading 을 지원한다.정적 이미지는 lazy loading이 필요 없으므로 priority 속성 추가해주면 좋다 2) 사이즈는 width, height 속성으로 지정할 수 있지만 그것보단 sizes 속성을 사용하거나Image에 fill 속성 추가한 후 이미지를 감싼 부모요소에 relative 속성을 추가하는 게 좋다. 3) 이미지 미리보기 띄우기 (로드되기 전 블러처리) src="/images/example.jpg" alt="예시 이미지" width={600} height={400} placeholder="blur" blurDataURL="/images/example-blur.jpg"/> 이전 1 다음