7-8. EDIT 구현하기 (/EDIT)

일기를 수정하는 기능을 만들어보자.

먼저 원본 데이터를 가져오는 기능을 구현해보자.

 

아래와 같이 Edit.js페이지에 h2를 입력해도 아무것도 출력되지 않는데, 콘솔창을 이용해 확인해 보면 아래와 같이 No routes matched location "/edit/5"라고 출력된다.

그래서 Route를 어떻게 했는지 체크해보면 아래와 같이 하였다.

App.js 중

그래서 edit에도 path variable을 설정해놓으면 된다.

그럼 다음과 같이 Edit이 잘 출력되는 것을 확인할 수 있다.

그럼 이제 useParams로 id를 받아오자.

그럼 id를 받아오는 것을 console을 통해 알 수 있다.

그럼 이 id를 가지고 수정할 데이터를 들고와보자.

우선 data는 App.js에서 data를 가지고 있다.

그래서 Edit페이지에서는 useContext로 데이터들을 받아와야한다.

그럼 다음과 같이 4개의 data를 받아오는 것을 확인할 수 있다.

그럼 diaryList에서 우리는 id와 일치하는 data만 들고오면 되는 것이다.

우리는 edit 컴포넌트가 mount상태에 할 것이기 때문에 useEffect를 사용해보자.

id나 diaryList가 다르면 다른 데이터를 꺼내야하기 때문에, 이들이 변할때만 데이터를 가져오도록 해보자.

parseInt는 혹시 문자형태로 들고올 것을 방지하여 씌워 준 것이다.

그럼 다음과 같이 데이터를 잘 들고오는 것을 확인할 수 있다.

그런데 없는 id의 경우 undefined를 출력하기 때문에

다음과 같이 예외처리를 해주면 된다. (없을 경우 home으로)

우선 replace를 true처리 하여 뒤로가기를 못하도록하였다.

그럼 없는 일기를 찾으면 home 페이지로 이동하게 된다.

그리고 그 상태에서 뒤로 가게 된다면, 잘못된 링크로는 가지 않게 된다.

/edit/20 으로 이동한다면 없기때문에 home페이지로 가게 되고, 그전의 페이지로 가게 된다.

 

그러고 targetDiary는 state에 넣어서 사용할 것이다.

자 그럼 diary를 저장할 state를 작성해보자.

그럼 Edit컴포넌트가 우리가 수정하고자 하는 데이터를 잘 매칭하고 있음을 알 수 있다.

자 그럼 targetDairy를 통해서 originData라는 satate라는 값을 정해 놓고

originData가 있으면 DiaryEditor를 반환하도록 해보자.(마지막 줄)

그러면 데이터를 들고오는데, edit페이지인데 새 일기쓰기라고 아래와 같이 나오게 된다.

그래서 prop으로 다시 전달해줘보자.

 

이제는 DiaryEditor로 넘어가서 두개의 prop을 받아주고

그러고 이제 useEffect를 사용해보자.

그럼 아래와 같이 정상적으로 받아오는 것을 알아볼 수 있다.

자 그러면 상단에 새 일기쓰기가 아닌 일기 수정하기로 바꿔보자.

그리고 마지막으로 작성완료를 클릭한다면, onCreate가 아닌 onEdit이 실행되도록 설정해보자.

그러면 다음과 같이 정상적으로 출력된다.