yevdev◡̈

1️⃣ 하나의 애플리케이션 안에는 하나의 스토어 키워드 포스팅에서 작성했듯 하나의 애플리케이션 안에는 하나의 스토어가 있어야한다. 여러개가 가능하지만, 권장 X 특정 업데이트가 너무 빈번, 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러개! 개발도구를 사용하지 못하게 됨.. 2️⃣ 상태는 읽기 전용 (불변성 유지) 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식! 개발자 도구를 통해서 뒤로 돌리고 혹은 다시 앞으로 돌릴 수 있다. shallow equality 검사 : 내부적으로 데이터가 변경되는 것을 감지하는 검사 방식 곧, immutable.js 혹은 immer.js를 사용하여 불변성을 유지하며 상태를 관리하는 방법에 대해 배우게 될 것! 3️⃣ 변화를 일으키는 함수, 리..

Redux의 주요키워드는 대부분 useReducer을 사용할 때 접해본 개념들이다! 1️⃣ 액션 (Action) 상태에 어떤 변화가 필요할 때, 액션을 발생! 하나의 객체로 표현 { type: 'TOGGLE_VALUE" }​ type 필드가 필수적, 그 외의 값들은 개발자 마음! 2️⃣ 액션 생성 함수 (Action Creator) 액션을 만드는 함수 단순히 파라미터를 받아와서 액션 객체 형태로 만듦. export function addTodo(data){// data를 파라미터로 받아옴. return {// 액션 객체 형태로 만듦 type: 'ADD_TODO', data }; } //화살표 함수로도 만듦! (파라미터로 받아오는 대신!) export const changeInput = text => ({..

이번 카테고리도 마찬가지로 벨로퍼트님의 블로그 자료를 보고 공부한 내용을 바탕으로 합니다. Redux? 리액트에서 가장 많이 사용되는 상태 관리 라이브러리 중 하나 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능! Redux vs Context API 1️⃣ Middleware 리덕스에는 미들웨어라는 개념이 존재 리덕스로 상태관리를 할 때, 우리가 useReducer을 사용해볼 때 접했던 개념인 리듀서 함수를 사용 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행할 수 있다. 특정 조건에 따라 액션 무시 액션을 콘솔에 출력 or 서버쪽에 로깅 액션이 디스패치 됐을 때, 서버 쪽에 로깅 특정 액션이 발생했을 때, 이에 기반하여 ..

이 카테고리에서는 컴포넌트 내부에 Hooks를 사용해보고, Context와 함께 사용해보고, 마지막에서는 재사용 및 간결성을 위한 유틸함수 몇가지를 만들어서 코드를 간결하게 만들어줬다! 지금까지 배운 API 연동 방법으로는 API를 연동해서 개발을 하게될때 큰어려움은 없다고 하나,, Redux 등의 상태 관리 라이브버리를 함께 사용하기도 한다! 해당 상태 관리 라이브러리를 사용했을때의 이점은 좀 더 체계적으로 비동기 관련 액션을 처리할 수 있고 여러 미들웨어 라이브러리를 사용하여 복잡한 비동기 작업을 좀 더 편하게 처리해줄수 있다고 한다. 또한, 서버 사이드 렌더링을 구현하게 될 때, 서버에서 들고 있는 데이터를 쉽게 보존하여 그대로 브라우저에게 전달해주는 과정이 훨씬 쉬워지기도 한다고 한다! 서버 사이..

리액트의 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? 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 어떤 응용프로그램에서 데이터를 주고 받기 위한 방법 어떤 특정 사이트에서 특정 데이터를 공유할 경우, 어떠한 방식으로 정보를 요청해야하는지, 그리고..