241216

Server Action

<form action={createReviewAction}>
	<input name="bookId" value={bookId} hidden readonly />
</form>

서버 액션 따로 분리할 때 꿀팁 분리하면서 bookId가 필요한데 props로 받을 수 없는 경우 이런식으로 값 전달을 위한 input 태그를 만들고 숨겨주면 됨 -> readonly는 버전 업뎃되면서 이제 input 태그에 value만 있고 onchange가 없으면 에러 뜨기에 readonly라고 명시해줘야댐

RevalidateQueries vs InvalidatePath

invalidateQueries: 쿼리 키 기반 캐시를 무효화해서 데이터를 새로 요청하고 상태 업데이트 $\to$ React 상태 관리와 밀접하게 연결되어 있고, 특정 데이터가 변경되면 바로 API 요청을 다시 보내는 방식으로 동작

revalidatePath: 특정 경로의 정적 페이지를 무효화하고, ISR(Incremental Static Regeneration)을 통해 서버에서 새로운 데이터로 페이지를 다시 생성 $\to$ 이는 Next.js의 정적 페이지 관리와 관련된 기능

요약하자면:

invalidateQueries → 쿼리 키 기반 데이터 캐시 업데이트
revalidatePath → 서버 정적 페이지 업데이트

revalidatePath 사용시 주의할 점

• 서버 측에서만 실행 가능
• 해당 페이지와 관련된 데이터 모두 재생성(force-cache도 무시)
• full route cache도 무시 -> 삭제됨 -> 새로고침 전까지 다시 안생김
  

이러는 이유: 항상 최신의 데이터를 보장하기 위해

페이지 재검증 5가지 방법(RevalidatePath)

// 1. 특정 주소의 해당되는 페이지만 재검증
revalidatePath(`/book/${bookId}`);

// 2. 특정 경로의 모든 동적 페이지를 재검증
// 첫번째 인수 경로 -> 1번처럼 실제 부라우저에 나타나는 경로 x -> 해당 페이지 컴포넌트가 작성된 폴더 또는 파일의 경로 명시 필요
revalidatePath("/book/[id]", "page");

// 3. 특정 레이아웃을 갖는 모든 페이지 재검증
// 라우트 그룹 이름(or layout이 적용된 폴더 이름), "layout"
revalidatePath("/(with-searchbar)", "layout");

// 4. 모든 데이터 재검증
// 루트 레이아웃을 갖는 페이지 재검증 -> 모든 페이지 재검증
revalidatePath(`/`, "layout");

// 5. 태그 기준, 데이터 캐시 재검증
revalidatePath("tag-name");

useActionState(React19)

// 1. form state, formAction, 서버 액션이 실행 중인지 아닌지 판별 
const [state, formAction, isPending] = useActionState(액션함수, 폼 상태 초기값)

// 서버 액션이 실패했을 경우의 에러 핸들링
useEffect(() => {
	if (state && !state.status) {
    	alert(state.error);
    }
}, [state])
     

return (
	<form action={formAction}> // 원래 액션함수 들어있던 자리에 formAction을 넣어야됨
  		...
	</form>
)

form state에는 액션 함수의 응답값이 넘어옴 (status 값이 넘어올것)
isPending === true면 로딩 ui 보여주면 댐 -> disabled={isPending} 이런식으로 이것저것 막아두기

// 보통 state 값을 쓸 일은 잘 없기에 _로 대체하곤 함
// 첫번째 인수로 state를 꼭 넣어줘야함
export async function 액션함수(state:any, formData: FormData)

if (특정조건) {
	return {
    	status: false,
      	error: "리뷰 내용과 작성자를 입력해주세요",    }
}
...
	return {
    	status: true,
        error: ""
    }

programmatically form submit

폼 안에 버튼 말고 그냥 div, a 등의 태그가 있을 때 제출되게끔 하는 방법

export default function ReviewItemDeleteButton() {
	const formRef = useRef<HTMLFormElement>(null);
  
return (
	<form ref={formRef}>
  		<div onclick{() => formRef.current?.requestSubmit()}>
  			삭제하기
  		</div>
  	</form>
)}

Submit보다 RequestSubmit이 더 안전하게 동작하므로 웬만해선 RequestSubmit 쓰는 거 ㅊㅊ(리액트의 권장사항) -> 유효성 검사를 보장하고, 특정 제출 버튼의 동작을 명시적으로 트리거 할 수 있기 때문