목록React (38)

우사미 코딩

[React] 느린 데이터 환경에서 테스트하기

리액트 뿐만 아니라 모든 웹페이지 환경에서 테스트 가능함 1. 관리자도구에서 속도 변경 관리자도구 -> Network -> No throttling에서 slow 3G로 변경하면 정말정말 느림 ㅋ 근데 이거 테스트 끝날때마다 초기화하기 귀찮으니 타이머 설정하는걸 춫너함 2. 타이머 설정 (setTimeOut) import { createAsyncThunk } from "@reduxjs/toolkit"; import axios from 'axios'; const fetchUsers = createAsyncThunk('users/fetch', async()=>{ const response = await axios.get('http://localhost:3005/users'); await pause(1000);..
React 2023. 7. 6. 10:33
[React] redux - useSelector로 여러 value 반환하기

textInput의 name value를 포함하는 car.name이 있으면 bold 처리해주기 useSelecter에서 cars와 name을 같이 반환하도록 한다 (10행) import {useSelector, useDispatch} from 'react-redux'; import { removeCar } from '../store'; function CarList(){ const dispath = useDispatch(); const {cars, name} = useSelector(({form, cars : {data, searchTerm}})=>{ const filteredCars = data.filter((car)=> car.name.toLowerCase().includes(searchTerm.to..
React 2023. 7. 5. 15:18
[React] extraReducer

현재 사용하고 있는 라이브러리 - react-redux, immer, @reduxjs/toolkit add car form에 데이터를 입력하고 submit하면 carList에 추가하고 form의 textinput을 비워주고 싶다면? formSlice.fs에서 extraReducers로 carsSlice.jfs의 addCar와 연결해주면 된다 addCar가 호출한다면 폼을 비워주라는거임 import {createSlice} from '@reduxjs/toolkit'; import { addCar } from './carsSlice'; const formSlice = createSlice({ name:'form', initialState:{ name:'', cost:0 }, reducers:{ changeN..
React 2023. 7. 5. 13:43
[React] reducer

import Button from "../components/Button" import { useReducer } from "react"; import Panel from "../components/Panel" const INCREMENT_COUNT = 'increment'; const DECREMENT_COUNT = 'decrement'; const SET_VALUE_TO_ADD = 'set-value-to-add'; const ADD_VALUE_TO_COUNT = 'add-value-to-count'; const reducer = (state, action) => { switch(action.type){ case INCREMENT_COUNT: return { ...state, count: state...
React 2023. 7. 2. 13:54
[React] context(2)

예전에 App.js에 CRUD function만들었던걸 모두 context에 옮길거임 - books.js (context) import { createContext, useCallback, useState } from 'react'; import axios from 'axios'; const BooksContext = createContext(); function Provider({ children }) { const [books, setBooks] = useState([]); const fetchBooks = useCallback(async () => { const response = await axios.get('http://localhost:3001/books'); setBooks(response...
React 2023. 6. 27. 15:18
[React] context

정보를 공유할 때 사용한다 현재 우리의 앱은 이벤트핸들러(초록색)을 컴퍼넌트 하위요소까지 전달하는 지루하고 실수하기 쉬운 작업들을 하고있는데 refactor을 사용하면 이런 실수를 줄일 수 있다고 함 여기서 중요한 것은 context는 communication chennel이고 data를 공유하는지, 그 처리는 어떻게 되는지 전혀 상관하지 않는다 Redux는 organization data 암틑 컨텍스트를 사용해보도록 하게음 1. context 생성하기 2. context import하기 - index.js render부분을 이렇게 수정하면 app에서 렌더링 하는 모든 요소들은 context.provier의 value를 사용할 수 있다 확인. BookList.js에서 context 불러오고 useCont..
React 2023. 6. 27. 05:24
[React] useEffect

근데 우리의 프로젝트는 첫 실행했을때 가지고 있는 데이터르 ㄹ띄워야한단 말이져 function App(){ const[books, setBooks] = useState([]); const fetchBooks = async()=>{ const response = await axios.get('http://localhost:3001/books'); setBooks(response.data); }; // fetchBooks(); 무한 츠쿠요미 fetchBooks라는 함수를 만들었고염 근데 이거 7행처럼 호출해보면.. 절대 안 됨. 7행에서 fetchBooks호출하면 setBooks하져 setter함수 호출하면 다시 App함수가 실행되고 다시 7행에서 fetchBooks호출하고 setBooks().. App호출..
React 2023. 6. 26. 16:37
[React] json-server 적용하기 (REST client, api.http)

이제 vs code 확장프로그램으로 api client를 설치하고 사용하려고 함 vs code extension에서 'rest client' 검색하고 설치 ㄱ - 만약 다음과 같은 서버오류가 발생한다면 package.json의 server를 초록색과 같이 바꾸기 "The connection was rejected. Either the requested service isn’t running on the requested server/port, the proxy settings in vscode are misconfigured, or a firewall is blocking requests. Details: RequestError: connect ECONNREFUSED 127.0.0.1:3001" "ser..
React 2023. 6. 26. 15:05
이전 Prev 1 2 3 4 5 Next 다음