본문 바로가기

React/API 연동

 (7)
[React] API 연동 공부 마무리 이 카테고리에서는 컴포넌트 내부에 Hooks를 사용해보고, Context와 함께 사용해보고, 마지막에서는 재사용 및 간결성을 위한 유틸함수 몇가지를 만들어서 코드를 간결하게 만들어줬다! 지금까지 배운 API 연동 방법으로는 API를 연동해서 개발을 하게될때 큰어려움은 없다고 하나,, Redux 등의 상태 관리 라이브버리를 함께 사용하기도 한다! 해당 상태 관리 라이브러리를 사용했을때의 이점은 좀 더 체계적으로 비동기 관련 액션을 처리할 수 있고 여러 미들웨어 라이브러리를 사용하여 복잡한 비동기 작업을 좀 더 편하게 처리해줄수 있다고 한다. 또한, 서버 사이드 렌더링을 구현하게 될 때, 서버에서 들고 있는 데이터를 쉽게 보존하여 그대로 브라우저에게 전달해주는 과정이 훨씬 쉬워지기도 한다고 한다! 서버 사이..
[React] #6 | Context 와 함께 사용하기 리액트의 Context와 API연동을 함께 하고 싶다면 어떻게 해야 되는지 알아보자. ( + 코드를 함수화해서 재사용하는 것 까지! ) 컴포넌트에서 필요한 외부 데이터들은 컴포넌트 내부에서 useAsync와 같은 Hook을 사용해서 작업하면 충분하다! 하지만, 가끔씩 특정 데이터들은 다양한 컴포넌트에서 필요하게 될때도 있는데 그럴때에는 Context를 사용하면 개발이 편해진다! 예를 들면, 현재 로그인된 사용자의 정보, 설정 등 1️⃣ Context 준비하기 import React, { createContext, useReducer, useContext } from 'react'; // UsersContext에서 사용 할 기본 상태 const initialState = { users : { loading..
[React] #5 | react-async, 요청 상태 관리하기 💡react-async? #4에서 만든 useAsync와 비슷한 함수가 들어있는 라이브러리 이안의 함수이름도 useAsync : 사용법이 좀 다름! 라이브러리 설치 yarn add react-async react-async의 공식 사용법 import { useAsync } from "react-async" const loadCustomer = async ({ customerId }, { signal }) => { const res = await fetch(`/api/customers/${customerId}`, { signal }) if (!res.ok) throw new Error(res) return res.json() } const MyComponent = () => { const { data, e..
[React] #4 | useAsync 커스텀 Hook 만들어서 사용하기 데이터를 요청할때마다 리듀서를 작성하는건 번거롭다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아보자. useAsync.js import { useReducer, useEffect } from 'react' function reducer(state, action) { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: null }; case 'SUCCESS': return { loading: false, data: action.data, error: null }; case 'ERROR': return { loading: false, data..
[React] #3 | useReducer로 요청 상태 관리 #2 에서의 useState 대신에, useReducer를 사용하여 구현을 해보자 useReducer을 사용하여 LOADING, SUCESS, ERROR 액션에 따라 다르게 처리하기 Users.js import React, {useState, useEffect} from 'react' import axios from 'axios'; function reducer(state, action){ switch(action.type){ case 'LOADING': return{ loading: true, data: null, error: null }; case 'SUCCESS': return{ loading: false, data: action.data, error: null }; case 'ERROR': ret..

티스토리툴바