CRUD - Update : 게시글 수정하기

이제 게시글 상세페이지에서 수정하기 버튼을 누르면 게시글 수정페이지로 가서 게시글을 수정할 수 있는 기능을 추가해보자

 

이때 수정할 때는 기존의 게시글내용을 온전히 수정페이지에 가져와야한다.

 

먼저 순서를 그려보았다.

 

1. 수정버튼을 누르면 게시글 수정 페이지로 이동

2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청)

3. 수정내용 작성 후 다시 서버에 수정API 요청

4. 수정내용 DB에 저장

5.수정완료후 해당 게시글 페이지로 이동

 

 

 

1. 수정버튼을 누르면 게시글 수정 페이지로 이동

 

-LInk로 수정페이지에 이동한다

-이때 수정페이지도 App.js에 Route에 추가해줘야한다.

 

2. 게시글 수정페이지에는 기존 내용이 보여져야함(서버에 기존내용 요청)

 

postNum을 이용해서 해당 게시글 내용을 서버에 요청한다.

기존의 상세페이지를 들어가면 요청했던 API와 동일하다.

 

 

3. 수정내용 작성 후 다시 서버에 수정API 요청

 

edit라는 API에 수정 요청을 보낸다.

 

 

수정한 데이터를 서버로 보내고 서버에서는 postNum으로 해당 게시글을 찾아 데이터를 $set을 이용해 새로 바꿔준다.

 

 

5.수정완료후 해당 게시글 페이지로 이동

 

사용자가 수정되었는지 궁금하니까 다시 해당되는 게시글페이지로 보내준다.

 

 

 

추가적인 부분

 

☝useEffect를 두번 쓴다

현재 게시글 수정페이지로 가면 처음에는 그 게시글 수정 데이터는 빈 데이터이다.(서버에서 요청하기전)

그래서 서버 요청을 하고나서 데이터를 받아오면  그때 데이터를 다시 띄워줘야한다.

 

 

즉  수정페이지 렌더링 -> 서버에 데이터 요청 -> 수정 전 게시글 데이터 화면에 출력의 순서가 된다.

이때 useEffect에서 서버에 기존 데이터를 요청하고나면 데이터를 가져올 것이다. 하지만 그때는 이미 렌더링이 끝난 상태이다.

즉 데이터는 가져왔지만 화면에는 띄워지지 않는 것이다.

 

그래서 서버 요청후에 만약 PostInfo 데이터가 변한다면 두번째 useEffect가 실행되어 렌더링되므로 데이터를 화면에 띄울 수 있게 되는 것이다.

☝수정 취소버튼

수정 취소를 누르면 해당 페이지에서 뒤로 가줘야한다.

navigate에 -1을 주면 뒤로가기가된다.

근데 현재 form안에 취소버튼이 종속되어있으므로 취소버튼을 누르면 새로고침이된다.

그러므로 취소버튼에 event.preventDefault()를 같이 실행시켜서 새로고침을 막아준다.

 

 

 

💢발생하는 오류

게시글 수정 페이지에 갔을 때 위에서 useEffect 두 번 요청한 이유처럼 처음에는 데이터가 undefined이다.

그래서 그걸 경고하는 창이 뜨는 것이다.

 

이를 해결하기 위해서는 게시글 수정 전 기존 데이터를 서버 요청해서 불러오기 전에 조건문으로 처리해줘야한다.

아래와 같이 || 연산자를 사용해서 데이터가 없으면 " " 빈 값을 출력해준다.