Rest API, Hook (useState, useEffect)

GY·2021년 9월 26일
0

리액트

목록 보기
6/54
post-thumbnail

Rest API

Representational state transfer(REST)

백엔드와 클라이언트에서 어떤 방식으로 커뮤니케이션할지 정의해놓은 API
RESTful web services라고도 불린다.

주요 method

GET

이미 존재하는 사용자의 정보를 받아오는 경우(읽는 경우)

POST

새로운 사용자 정보 생성

PUT

사용자 정보 업데이트

DELETE

사용자 정보 삭제

Hook

useState()

  • useState : 일정한 데이터를 기억한다.

const [count, setCount] = useState(0);

  • 반환 값 : 1. state 변수, 2. 해당 변수를 갱신할 수 있는 함수
  1. state 변수
  <p>You clicked {count} times</p>
  1. 해당 변수를 갱신할 수 있는 함수 (setCount)
  <button onClick={() => setCount(count + 1)}>
    Click me
  </button>

useEffect

  • 이 Hook을 사용해 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지 지정한다.
  • useEffect Hook에 전달하는 함수는 effect라고 부른다.
  • 컴포넌트를 렌더링할 때 리액트는 effect를 기억했다가 DOM을 업데이트한 이후에 실행한다. (첫번째부터 이후 모든 렌더링 이후에 늘 실행한다.)
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

name이 바뀔때마다 useEffect 호출

Reference

https://ko.reactjs.org/docs/hooks-effect.html

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글