코딩앙마 Reac공부 (PUT, DELETE, POST, useHistory)

CRUD중 Update를 활용해서 단어 수정

• Create : POST
• Read : GET
• Update : PUT
• Delete : DELETE

아는 단어인지 체크/미체크 하는 부분은 상태저장 필요

data.json에서 isDone 필드 업데이트해 수정해야함

 

Word.js - toggleDone함수 수정

 

• fetch 두번째 인자 객체에는 요청의 옵션들을 입력해줌.
• method는 PUT
• Content-Type은 보내는 리소스의 타입을 의미 -> 여기서는 json형태로 보낸 것
• 단순히 데이터를 가져오는 GET과 다르게, PUT은 수정을 위한 정보를 실어서 보내줘야함 -> body안에 입력 -> 기존 데이터 ...word에 isDone을 바꿔서 넣어줌 (이때 JSON 형변환 해줘야함)
• 마지막으로 리턴된 Promise객체 응답이 OK면 상태를 바꿔줌

 

이번에는 삭제를 해보자

 

삭제버튼을 누르면 confirm창을 띄워 물어보고, 삭제해보자

삭제 요청을 하고, OK응답을 받으면 컴포넌트 재렌더링을 해줘야 단어 삭제된 것이 보임

이때 null 리턴 -> 아무것도 표현하지 않음

 

 

• del함수 만들어서 삭제 버튼에 달아줌
• word 상태선언, 이때 props로 받는 word는 w라는 새로운 변수로 할당해줌
• word:w => props로 넘어온 word를 w라는 변수명으로 사용하겠다 라는 뜻
• 삭제되면 word의 id를 0으로 변경
• word의 id가 0이면 null 리턴

 

POST(생성)

CreateWord.js 컴포넌트 생성

 

App.js

Header.js

CreateWord.js

CreateWord.js

 

- 저장버튼을 누르면 새로고침이 되는데, 버튼이 form태그 안에 있어서 그런것

- 새로고침을 막아주기 위해 onSubmit 함수 작성

 

 

input창에 적힌 값들을 얻기 위해 useRef라는 Hook을 사용

DOM에 접근 할 수 있게 해줌 ex. 스크롤 위치 확인, 포커스 줄때

 

- useRef 생성해서 할당해줌

- 이렇게 연결해주면 돔 요소 생성된 후 접근할 수 있음

- 저장버튼 클릭하는 시기 => 렌더링 결과가 DOM에 반영된 직후

- current 이용하면 해당 요소에 접근 가능

- value는 input에 입력된 값을 얻을 수 있음

 

onSubmit함수 내 fetch

 

생성 완료 후 해당 day 페이지로 이동하기

 

 

Error발생

 

useHistory -> useNavigate로 변경

빠르게 수정

 

 

 

useNavigate로 바꿔주고 페이지 이동할수 있는 함수를 navigate변수에 저장 후 navigate의 인자로 설정한 path 넘겨주기

 

 

POST : 날짜 생성

 

createWord와 마찬가지로 컴포넌트 생성 후 App.js, Header.js 연결

CreateDay.js