23) REST API, useEffect, TypeScript

ppparkta·2022년 12월 30일

웹개발

목록 보기

24/26

요약

React
- REST API(POST, DELETE, PUT)
- useEffect
- useRef
- useHistory
- TypeScript로 전환하기

React

REST API

REST API는 url주소와 메서드로 CRUD 요청을 보내는 것이다.

Create(POST), Read(GET), Update(PUT), Delete(DELETE)

일반적으로 api를 호출하는 방식인 fetch 키워드를 통해서 받아온 파일 정보를 변경할 수 있다.

프론트엔드에 집중하기 위해 json server를 통해 빠르고 쉽게 REST API를 구축하기로 했다.

json server

$ sudo npm install -g json-server

json서버를 설치하고 나면 서버를 열어야 한다.

$ json-server --watch 파일경로 --port 포트넘버

해당 명령어를 터미널에서 실행하면 원하는 경로에 있는 json파일을 서버 형태로 열 수 있다. 단순히 dummy데이터를 이용하는 것이 아니라 실제 server와의 통신과 동일하게 코드를 작성할 수 있기 때문에 도움된다.

나는 port 3000에 프로젝트를 열었기 때문에 port 3001에 json server를 열었다.

PUT

fetch('url', method).then(res => { if(res.ok) setIsDone(!isDone) });

단어장을 만들면서 체크한 단어 정보를 저장하기 위해서 PUT을 사용했다. PUT메서드를 사용하면 받아온 파일을 update할 수 있다.

해당 코드의 method 부분에는 method 객체를 넣어야 하는데 method는 method, headers, body로 구성돼있다. 운영체제 시간에 배운 그거 맞음

{
	method: 'PUT',
    headers: {},
    body: 내가 변경하고자 하는 내용,
}

fetch(`http://localhost:3001/words/${word.id}`, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    ...word,
    isDone: !isDone,
  }),
}).then(res => {
  if (res.ok) {
    setIsDone(!isDone);
  }
});

headers에 들어간 Content-Type은 json파일을 명시하기 위해 작성한 것이다. body에는 내가 update하고자 하는 내용을 넣으면 된다.

DELETE

DELETE를 사용하면 서버에 저장된 정보를 삭제할 수 있다. PUT과 사용방법이 비슷하지만 어떤 정보를 넘겨받을 필요 없이 삭제만 하면 되기 때문에 더 간단하다.

사실상 method객체에서 넘겨줄 값은 method밖에 없다. 단, fetch에 넣는 url경로를 정확히 작성해야 한다.

fetch(`http://localhost:3001/words/${word.id}`, {
  method: 'DELETE',
}).then(res => {
  if (res.ok) {
    setWord({ id: 0 });
  }
});

POST

POST를 사용해서 값을 추가할 수 있다. PUT과 사용방법이 비슷하다. 마찬가지로 url을 정확하게 입력해야 한다.

fetch(`http://localhost:3001/words/`, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    day,
    eng,
    kor,
    isDone: false,
  })
}).then(res => {
  if (res.ok) {
    alert("생성이 완료 되었습니다");
    history.push(`/day/${day}`);
    setIsLoading(false);
  }
});

useEffect

useEffect는 어떤 state가 바뀔 때에만 동작하는 함수를 정의할 수 있는 hooks이다.

의존성 배열이 병경되는 경우에만 함수가 작동한다. 따라서 의존성 배열을 비워두면 처음 렌더링될 때만 실행되고 이후에 다시 실행되지 않는다.

useEffect의 의존성 배열이란 useEffect의 두번째 인자에 넣는 배열을 말한다.

의존성 배열을 빈 배열로 두고 useEffect를 작성하면 처음 렌더될 때 단 한번만 실행되고 이후에 리렌더링 되더라도 다시 실행되지 않는다.

api의 경우 여러번 호출할 필요가 없기 때문에 의존성 배열을 비우고 fetch를 useEffect 안에 넣는 경우가 많다.

useEffect를 이용해서 api를 호출하는 커스텀 훅을 만들었다.

import { useState, useEffect } from "react";

export default function useFetch(url) {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch(url)
            .then(res => { return res.json() })
            .then(data => setData(data));
    }, [url]);
    
    return data;
}

useHistory

TypeScript로 변환하기

여태까지 만들었던 .jsx파일을 .tsx(혹은 .ts)로 변환했다.

jsx를 사용하면 HTML속성이나 직접 만들 객체의 값을 확인하지 못하는 불편함이 있었는데, typescript는 자료형을 확실히 지정하기 때문에 그런 불편함을 해결할 수 있다.

export interface IDay {
    id: number;
    day: number;
}

interface 키워드를 통해 직접 만든 객체의 속성들의 자료형을 정의할 수 있다. 또한 export하면 다른 컴포넌트에서 import해서 사용할 수 있다.

사용하는 변수에 :를 붙여서 타입을 지정하면 된다. 그러나 useRef의 경우 변수가 아니라 useRef뒤에 <>를 붙여야 한다.

아직 단순히 따라하기만 했기 때문에 강의를 더 보면서 타입스크립트에 적응하는 연습을 해야겠다. ^.^ 1월 4일까지 타입스크립트 강의 완강하기로 했다.

ppparkta

겉촉속촉

이전 포스트

22) css module, props, react-router-dom

다음 포스트