TIL - 21.08.03 👨‍💻

REST API 사용

---

PUT - Update

fetch('데이터를 업데이트할 endpoint/id',{
      method: 'PUT',
      headers: {
      	'Content-Type': 'application/json'
      },
      body : JSON.stringify({
      	업데이트할 데이터 키 : 데이터 값
      })
})
.then(res=>{
	if(res.ok){
    	alert('업데이트가 완료되었습니다.')
    }
})

위와 같은 형식으로 사용한다.
fetch의 두번째 인자를 사용하지 않는다면 기본적으로 GET메소드가 사용되며, 두번째 인자를 사용할 경우에는 HTTP 요청 메세지를 작성한다.

method 에는 사용할 메소드를 적어준다.

headers는 header를 프로퍼티로 가진 객체를 가지며 'Content-Type' 같은 경우는 PUT하는 데이터의 종류를 명시하는 헤더이다.

body는 실질적으로 엔드포인트에 업데이트할 페이로드가 들어간다.

---

DELETE

fetch(`데이터를 삭제할 엔드포인드/id`, {
      method: 'DELETE'
      })

DELETE 메소드의 경우는 데이터 삭제만 하면 되기에 별다른 header 및 body를 적지 않아도 된다.

---

POST - Create

fetch('데이터를 생성할 endpoint',{
      method: 'POST',
      headers: {
      	'Content-Type': 'application/json'
      },
      body : JSON.stringify({
      	추가할 데이터 키 : 데이터 값
      })
})
.then(res=>{
	if(res.ok){
    	alert('데이터가 생성되었습니다.')
    }
})

역시 비슷하게 사용하며 추가할 데이터의 경우는 endpoint로 데이터를 생성할 path만 넣어주면 된다.
그리고 그 외 기존 데이터와의 형식에 맞춰서 데이터를 생성해준다.

---

useRef Hook

useRef는 돔에 접근할 수 있게 해주는 훅이다.
이 useRef를 포커스를 주거나 스크롤 위치를 확인하는 것 등에 사용할 수 있다.

function Comp () {
  const varRef = useRef(null)
  return (
  	<div>
    	<input type='text' ref={varRef} />
    	<button onClick={()=>{console.log(varRef.current.value)}}>입력</button>
    </div>
  )
}

위와 같이 변수에 할당한 다음 jsx 내 DOM 요소에 ref 속성으로 연결한다.

이럴 경우 데이터가 객체형태로 varRef에 담기게 되며,
current라는 프로퍼티 키에 DOM 요소인 input이 값으로 담긴다.

그렇기에 varRef.current.value로 input의 value를 사용할 수 있게 되는 것이다.

---

useHistory()

useHistory는 리액트 훅은 아니고 리액트 라우터(react-router)에서 지원하는 메소드이다.

const variable = useHistory();
// 다음과 같이 할당하고,
variable.push(`url-path`)
// 다음과 같이 사용하는데, 해당 코드가 실행될때 host의 해당 path로 이동하게 된다.

리액트 돔 라우터의 <Link to='~'>처럼 a 태그를 이용하지 않고도 페이지를 이동하는데 사용한다.

TO DO 🔥

• 가상돔 정리하기

Retrospect 🧐

오랜만에 리액트를 만나서 웬만한건 다 기억한다고 생각했는데, 아니나 다를까 역시나 잊어먹은게 너무 많았다.

코딩앙마님 유튜브를 보면서 다시 복습했는데 그때의 기억이 떠오르면서 PTSD 머리가 아파왔다 😇

오늘은 빠른 수면 ~~빠른 수면이 1시~으로 머리좀 식힌 다음에

내일 아침에 빨리 일어나서 리액트가 활용하는 이 가상돔을 정리해봐야겠다.

Reference 🙇

코딩앙마님 유튜브