[10주차] 1. 리액트 API 연동

리액트 API 연동

• redux는 API 연동 필수적인 요소가 아니다.

API 연동 기본

• npx create-react-app > yarn add axios
• axios 라이브러리 : rest api를 요청하게 될 때 프로미스 기반으로 처리할 수 있게 해주는 라이브러리(rest api 쉽게 요청 가능)
  • import axios from ‘axios’;
  • 요청 방법 : axios.HTTP메서드(요청 api 주소와 (정보))
    ;
• rest api : 클라이언트와 서버가 소통하는 방식 중 하나(HTTP 메서드(GET, POST, PUT, DELETE)를 통해 구분)
• HTTP 메서드 : GET(데이터 조회), POST(데이터 등록), PUT(데이터 수정), DELETE(데이터 제거)

컴포넌트에서 api 요청하는 방법

• api 요청할 시 관리해야 하는 상태 3가지
  • 1. 요청의 결과
  • 2. 로딩 상태
  • 3. 에러useState와 useEffect로 데이터 로딩하기

useReducer로 요청상태 관리하기

• 장점 : 요청 관리에 대한 로직을 따로 분리해서 나중에 재사용 가능
• vs 기능 : reducer 이름을 asyncReducer로 바꾸고 그거에서 오른쪽 키>리펙터링 메뉴>새파일로 이동>reducer 구현 코드만 뽑아서 새파일로 분리됨 > 다른 컴포넌트에서도 이 reducer 재사용 가능해짐

커스텀 Hook

• 컴포넌트가 렌더링 될 때 데이터를 요청해야 하는 상황에서는 아예 useAsync Hook을 만들어서 useEffect를 대신해서 사용하면 코드가 줄어듬
• 반복되는 코드들은 hook으로 만들어서 사용하면 좋음

react-async 라이브러리로 요청 상태 관리하기

• yarn add react-async
• 저번시간에 만든 custom hook인 useAsync(이 라이브러리 동일 이름의 함수와 작성방법 다름)와 비슷한 함수가 들어있는 라이브러리
• 매번 프로젝트를 만들 때마다 직접 요청 상태를 관리하기 위한 hook을 작성하기 귀찮을 땐 이라이브러리 사용
• useAsync hook
  • 기본적인 기능
• 객체 형태로 받아와서 비구조화 할당
• 첫번째 파라미터 : 객체 내부에 promiseFn이라는 이름으로 함수 넣어줌, 이후 필요한 파라미터
• 장점 : 필요할 때 설치하고 바로 사용 가능해서 굉장히 편함, 컴포넌트에서 비동기 작업시 필요한 기능들도 대부분 탑재, hook말고도 컴포넌트 형태로 사용 가능, 특정 promise를 기다리는 작업을 도중에 취소할 수 있는 기능도 존재
• 단점 : 옵션이 다양해서 복잡하다.

Context에서 비동기작업 상태 관리하기

• 특정 컴포넌트에서만 필요한 외부데이터는 컴포넌트 내부에서 useAsync 같은 hook 등을 사용해서 작업하면 충분하지만
  특정 데이터가 다양한 컴포넌트에서 필요할 때(대표적으로 현재 로그인 중인 사용자의 정보를 체크하는 작업할 때 다양한 곳에서 사용자의 로그인 상태를 필요할 수 있다)는 여기저기서 필요한 상태를 비동기적으로 가져와서 사용하는 경우엔 데이터를 context 내부에 가져와서 작업하면 편하다.
• 리팩토링 가능

Tips

• 구현과정 브라우저 상에서 느리게 보고 싶을 땐 개발자 도구 > Network 에서 인터넷 속도 지정해서 보기
• 특정 라인에서만 ESLint 무시하고 싶을 경우 : // eslint-disable-next-line 을 그 라인앞에 작성