react9 react 여러 setState가 서로 기다려서 멈춤(react state batch update) : setTimeout으로 각각 비동기 업데이트 에러 내용 react에서 서버로부터 응답을 받아 여러 setState를 Promise를 통한 비동기로 실행하는 상황입니다. 그런데 각 응답을 받자마자 state를 업데이트를 하지 않고 모든 응답을 받았을 때 state를 업데이트합니다. 즉, 가장 느린 응답을 받기 전까지는 빠른 응답을 받은 다른 state들을 업데이트를 하지 않습니다. 에러 원인 이는 react가 re-render을 효율적으로 하기 위한 특정 원칙 때문입니다. "reconciliation"(재조정)이라고 불리는 이 원칙은 react가 최소한의 비교와 re-rendering으로 효율적으로 페이지를 업데이트하도록 해줍니다. 이러한 성능적인 이유 때문에 여러 setState 호출을 묶어서 한 번의 업데이트에 state를 업데이트하고 단 한 번.. 2023. 3. 10. react TextField setState 이후 바뀌지 않을 때 (재렌더링 안됨) 에러 내용 react의 material ui의 TextField에서 setState를 해도 관련된 요소가 변경되지 않습니다. 에러 원인 컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다. -react 공식 홈페이지- react는 setState로 인해 요소를 업데이트를 해야 할 때 성능최적화를 위해 virtual DOM을 사용합니다. 이는 state가 바뀐 전과 후의 요소를 비교하여 다른 부분을 부분적으로 제렌더링 합니다. 그런데 이러한 "비교"할 때 그리 엄격하게 비교하지 않습니다. state를 직접적인 텍스트로 사용하거나 map을 .. 2023. 2. 15. react url 파라미터 여러 개 받기 설명 react에서 url로 파라미터 받는 방법입니다. (여러 개) (예 : /url/:parameter) create-react-app으로 코드의 기본 틀이 만들어져 있다고 가정합니다. react url 파라미터 여러 개 받는 방법 router를 사용하고 Route의 path에 url/:파라미터 이름 를 설정하고 useParams()로 가져옵니다. 1. react-router-dom, react-dom을 설치합니다. npm i react-router-dom react-dom 2. src/index.js를 다음과 같이 수정합니다. import React from "react"; import { createRoot } from "react-dom/client"; import Router from "./Ro.. 2022. 12. 9. SyntaxError: Unexpected token '<' 에러 내용 SyntaxError: Unexpected token ' 2022. 10. 22. export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러 내용 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' 에러 원인 reactrouter가 업그레이드되면서 더 이상 Switch를 지원하지 않는다. 해결 방법 Switch 대신 Routes를 사용한다. 수정 전 코드 : Switch 사용 수정 후 코드 : Routes 사용 결과 참고 자료 Upgrading from v5 Upgrading from v5 Backwards Compatibility Package We are actively working on a backwards compatibility layer that implements the v5 API on top of the v6 implementation. .. 2022. 10. 22. react build 이번 포스팅에서는 react 최적화 방법 중 하나인 build에 대해서 다루고자 합니다. Production Build? 여기서 build는 production build입니다. (client에서 실행되는 프로그램을 build 합니다.) 컴퓨터 언어는 크게 두 가지로 나눌 수 있습니다. 인터프리터 언어와 컴파일 언어입니다. (물론 하이브리드 등 세부 분류가 있지만..) 그리고 우리가 쓰고 있는 JS는 인터프리터 언어입니다. 인터프리터 언어의 기본 concept는 source code를 interpreter로 바로 실행하는 것입니다. 그와 반대로 컴파일 언어는 source code를 compile 하여 object file 또는 immediate code 등을 만든 후 그것을 실행합니다. 그런데 인터프리터.. 2021. 3. 29. 이전 1 2 다음
