15. 글 수정

http://localhost:9999/update/3 구현하기

🔔 먼저 app 폴더 밑에 update 폴더 생성, 그 밑에 [id] 폴더 생성, 그 밑에 page.js 생성

update 기능에는  create 기능과  read 기능이 필요하다.

 

💡 기본적인 UI는 create를 가져오는 게 더 편하기 때문에 create 기능 가져오면 된다.

create/page.js 내용 그대로 복사 붙여넣기 후 컴포넌트 함수명을 Create에서 Update로 변경해준다.

 

💡 update에서는 title, body input 값에 원본이 적혀있어야 하기 때문에 read 기능 가져오면 된다.

read/page.js 열어보면 read page는 현재 서버 컴포넌트이기 때문에 그대로 사용할 수 없다.

왜냐하면 update는 클라이언트 컴포넌트이기 때문이다.

그래서 어쩔 수 없이 코드를 직접 작성해야 한다.

useEffect를 사용해서 sideEffect를 처리할 hook 가져온다.

여기서 fetch! fetch할 때 현재 id 값이 필요하기 때문에 useParams를 사용하여 params를 가져온다.

그 가져온 값의 id로 현재 id값을 사용하면 된다.

 

이 글을 title과 body를 form에다가 넣기 위해서는 state 생성 필요하다.

서버에서 받아온 데이터로 title과 body를 바꾼다.

input값에 표시하기 위해서는 value와 onChange를 사용한다.

이렇게 변경한 후 title과 body를 서버에 update 시키면 된다.

update 버튼을 누르면 onSubmit이 실행되면서 title 값과 body 값을 가져오고

서버쪽으로 데이터를 보낼 때 메소드는 PUSH 나 PATCH 사용한다.

PATCH를 사용해서 데이터를 전송하는데 전송하려고 하는 주소에 id 값을 추가해줘야 한다.

 

하지만 글 목록에서만 변경되고 본문은 여전히 바뀌지 않는다.

그 이유는 글 목록을 가져올때 가져온 주소의 캐시가 HIT 이기 때문이다.

상세 보기 페이지에서 캐시를 끄면 본문 또한 변경이 가능하다.

fetch에 두 번째 파라미터로 { cache : 'no-store' } 를 추가하면 본문이 update 된다.