sharingStorage

들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..

React API 연동하기 1번 과정에서 상태관리를 위해 사용했던 useState대신에 useReducer를 사용해보겠습니다. useReducer를 사용했을 때의 좋은 점 1. useState의 setState 함수를 여러번 사용하지 않아도 돼서 코드의 길이가 짧아진다. 2. reducer로 로직을 분리하면 재사용이 용이하다. 결과 User.js import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; const reducer = (state, action) => { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: nul..

1.React에서 API를 사용해보기 1.1 API 연동의 기본 API연동을 위해서 우선 새 프로젝트를 만들어야 한다. npx create-react-app react-api-use API를 호출하기 위해서 axios 라는 라이브러리를 설치한다. cd react-api-use npm install yarn // yarn add axios axios를 사용하여 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. API연동 실습에는 JSONPlaceholder 에 있는 연습용 API를 사용해볼 것이며 API는 https://jsonplaceholder.typicode.com/users 주소이다. 결과물 [ { "id": 1, "name": "Leanne Graham", "use..