해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
PUT(수정)
업데이트는 PUT 메소드를 사용한다.
Day 1 을 들어갔을 때, 체크박스 부분을 선택하면 아는 부분이라고 유지해주는 것이 좋아 보인다.
지금은 체크하고 새로고침 하면 다시 체크하기 전의 상태로 돌아간다.
이 부분을 PUT 메소드를 이용해서 data.json 의 isDone 필드를 수정할 수 있도록 해보자.
Word.js
이 토글 함수에 단순히 setIsDone 만 사용해 state 만 바꾸지 않고 다시 코드를 짜보자. setIsDone 코드 부분을 일단 지운다.
fetch 에 url 부분 (3001/words) 를 작성한다.
그리고 그 url 에 ${word.id} 를 넣는다.
두번째 인자로 객체를 넣는다. 이 객체는 요청의 option 들을 입력한다.
method 는 PUT 이 된다.
headers 에 Content-Type 을 application/json 으로 입력한다.
Content-Type 은 보내는 리소스의 타입을 의미한다.
Content-Type 에는 평범한 문자열부터 html, 이미지 등 여러가지가 있을 수 있다.
우리는 json 형식으로 보낼 것이기 때문에 application/json 으로 입력했다.
다음은 body 를 입력한다. PUT 은 GET 과는 다르게 수정을 위한 정보들을 body 에 담아 보내야 한다. 기존 데이터에 isDone 을 바꿔서 입력해주면 된다.
JSON 문자열로 바꾸기 위해서 JSON. stringify 로 감싸준다.
then 하고 응답을 받아서 응답(res) 가 ok 이면, state 를 바꿔주면 된다.
결과창
체크를 하고 새로고침을 하거나 페이지를 나갔다 들어와도 체크한 apple 이 유지된다.
DELETE(삭제)
단어 삭제를 해보자.
confirm 창을 띄워 삭제할 것인지 물어보고, 단어 삭제를 하도록 하자.
del 이라는 함수를 만들고, onClick 에 넣어준다.
삭제 버튼을 실수로 눌렀을 수도 있으니, confirm 창을 띄워 물어본다.
에러가 뜨기 때문에 window 를 붙여서 window.confirm 안에 문구를 넣는다.
fetch 안에 url 을 넣고 함수 내부에 DELETE 메소드를 작성한다.
삭제는 특별히 어떤 정보를 넘겨줄 필요는 없기 때문에, 여기까지만 작성하면 된다.
결과창
삭제 버튼을 누르고 확인을 눌러도 화면의 apple 단어가 삭제되지 않는다.
새로고침을 하니 apple 이 삭제된다.
삭제된 뒤에 단어 리스트를 화면에 다시 그려주지 않아서, 새로고침을 하지 않는다면 화면 그대로 있는 것이다.
Word.js
삭제 버튼을 누르고 확인 응답을 받으면 컴포넌트를 다시 랜더링 하도록 한다.
이때, null 을 리턴하면 아무것도 표현해주지 않는다.
{word:w} 로 설정하면 새로운 변수명 w 를 사용할 수 있다.
지금은 props 로 넘어온 word 를 w 라는 변수명으로 사용한다.
이제 삭제를 하면, then
응답(res) 을 받는데 (res.ok) 라서 삭제되면, word.id 를 0 으로 바꾸자 → setWord({id:0})
다른 데이터는 필요없고, id 만 0 으로 바꿔주면 된다.
그리고 word.id 가 0 이면, null 을 리턴한다.
결과창
confirm 창의 삭제에 대한 확인 버튼을 눌러보자.
pen 이 삭제되었다.
data.json
data.json 을 확인해보면, car 다음의 pen 이 삭제되었음을 알 수 있다.
