이번 시간엔 글쓰기를 구현 해보겠다.
react bootstrap 홈페이지에 있는걸 그냥 복사해서 가지고 와서 조금 변경하였다.
이제 폼 태그에 내가 쓴 데이터들을 보내야하는데 이 데이터들을 상태로 보관하는게 좋다.
이렇게 만들어주고 이제 내가 input박스에 뭔가 입력할때마다 set해서 저 book에 넣어주면 된다.
저번에 했던 것처럼 onChange함수를 사용해서 값의 변화가 일어날때마다 e로 어떤 이벤트가 발생했는지 이벤트컨텍스트를 받는다. 그리고 name도 추가해준다.
computed property name 방식으로 타겟에 대한 name에 value값을 넣어준다. 그리고 이걸로 book의 상태값을 변경시키는것
다음 onsubmit에 submitbook 함수를 넣고 e.preventDefault()을 통해 submit시 실행될 액션을 막는다.
그리고나서 사진과 같이 fetch함수를 통해 요청한다.
또 크로스오리진 에러가 나왔다.. 서버로 가서 save함수 위에도 @CrossOrigin를 붙였다.
다시 요청을 하니 응답 데이터도 잘 받았고 DB에도 잘 삽입 되었다.
다음
fetch함수에서 첫 번째 then에 res.json()은 다시 리턴을 해야하는데 이 res에는 뭐가 들어있는지 console을 찍어보자
첫 번째 response 값에 status가 보인다. 그렇기에 이게 201이면 진행하고, 아니면 진해 안하면 된다.
SaveForm에 props 넣어주고
코드를 이렇게 바꿔 응답 값이 null이 아니면 홈화면으로 가게 바꿨다.
하지만 저렇게 하기보단 두 번째 then뒤에 .catch((error)=> 이런식으로 에러 값을 받아서 처리하는게 일반적이다.
어쨋든 이렇게 처리하면 글쓰기를 누르면 데이터가 들어가고 홈화면으로 온다.
이번 게시글은 여기까지
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
