yevdev◡̈

리액트의 Context와 API연동을 함께 하고 싶다면 어떻게 해야 되는지 알아보자. ( + 코드를 함수화해서 재사용하는 것 까지! ) 컴포넌트에서 필요한 외부 데이터들은 컴포넌트 내부에서 useAsync와 같은 Hook을 사용해서 작업하면 충분하다! 하지만, 가끔씩 특정 데이터들은 다양한 컴포넌트에서 필요하게 될때도 있는데 그럴때에는 Context를 사용하면 개발이 편해진다! 예를 들면, 현재 로그인된 사용자의 정보, 설정 등 1️⃣ Context 준비하기 import React, { createContext, useReducer, useContext } from 'react'; // UsersContext에서 사용 할 기본 상태 const initialState = { users : { loading..

💡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..

데이터를 요청할때마다 리듀서를 작성하는건 번거롭다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 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..

#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..

1️⃣ 설정 axios 라이브러리 설치하기 $ cd api-integrate $ yarn add axios 💡간단히 자주 사용되는 4가지 메서드 정리! GET : 데이터 조회 POST : 데이터 등록 PUT : 데이터 수정 DELETE : 데이터 제거 2️⃣ axios 사용법 (GET) import axios from 'axios'; axios.get('/users/1'); 3️⃣ POST 사용법 ( 새로운 데이터 등록 ) 두번째 파라미터에 등록하고자 하는 정보 넣기 axios.post('/users',{ username: 'blabla', name: 'blabla' }); 💡useState와 useEffect로 데이터 로딩하기 useState : 요청상태관리 useEffect : 컴포넌트가 렌더링되는 ..

https://react.vlpt.us/integrate-api/ 이 카테고리도 정말,, 제수준에 딱맞게,,, 머찌신,, 벨로퍼트님의 블로그를 보고 공부하고 정리한 내용을 작성할 예정이다. API가 왜 필요한가? 웹 애플리케이션을 만들게 될 때, 데이터를 브라우저에서만 들고 있는게 아니라, 데이터를 보존시키고, 다른 사람들도 조회할 수 있게 하려면 서버를 만들고 서버의 API를 사용하여 데이터를 읽고 써야 한다. 그럼 API가 무엇인가? API? 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 어떤 응용프로그램에서 데이터를 주고 받기 위한 방법 어떤 특정 사이트에서 특정 데이터를 공유할 경우, 어떠한 방식으로 정보를 요청해야하는지, 그리고..

커스텀 Hook은 언제 필요? 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생 input을 관리하는 코드는 관리 할 떄마다 꽤나 비슷한 코드가 반복 이번 포스팅 내용은, 위의 상황에 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보는 것이다. 커스텀 Hooks 만드는 방법 src 디렉터리에 hooks라는 디렉터리를 만들고, 그안에 useInputs.js 파일을 만든다 커스텀 Hook을 만들대는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그안에 함수를 작성한다. 파일안에 useState, useEffect, useReducer, useCallback등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다. useInputs..

Study #19 까지의 상태관리는 어떻게 해왔을까? 주요 상태 업데이트 로직을 App 컴포넌트 내부에서 이루어왔다 상태를 업데이트 할 때, useState를 사용해서 새로운 상태를 설정했다. 💡useReduder? useState를 사용하여 상태를 관리하는 것이 아닌 또다른 상태관리 방법 이 Hook 함수를 사용하면 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있다. 심지어 다른 파일에 상테 업데이트 로직을 작성한 후, 사용할 수 있다. 💡reducer? 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reduer(state, action) { // 새로운 상태를 만드는 로직 // const ..

💡React.memo? 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능을 최적화 시켜주는 함수! 이 함수를 사용하면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄 수 있다. 사용법은 그냥 감싸주면 됨! CreateUser.js 에 적용 // 컴포넌트 리렌더링 방지를 위한 React.memo export default React.memo(CreateUser); 왕 쉬움! UserList.js 에 적용 import React, {useEffect} from 'react' // user리스트들이 보여지는 부분 const User = React.memo(function User({user, onRemove, onToggle}) { return( onT..

💡useCallback useCallback은 useMemo와 비슷한 Hook useMemo는 특정 결과값을 재사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 이전에 App.js 에서 구현했던 onCreate, onRemove, onToggle 함수를 확인해보자 const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출..