개발 노트

setState의 비동기적 특성 vs 함수형 업데이트 setState는 비동기로 동작한다. 리액트는 효율적으로 렌더링하기 위해 여러개의 상태 값 변경 요청을 batch(일괄 처리)처리하기 때문이다. 왜?? 성능 이슈 때문이다. -> setState마다 리렌더링이 일어난다면 얼마나 많은 렌더링이 일어날지 가늠할 수가 없다. const onClick = () => { //value = 0 setValue(value+1) //value + 1 => 2 setValue(value+1) //value + 1 => 2 setValue(value+1) //value + 1 => 2 } 위의 setState는 변경된 사항을 기억하지 않기 때문에 마지막 업데이트 적용되어 다름 렌더링에 쓰이게 된다. setState 함수..

react에서 개행할때 "\u00A0"

import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import { Line } from "@ant-design/plots"; const DemoLine = () => { const [data, setData] = useState([]); useEffect(() => { asyncFetch(); }, []); const asyncFetch = () => { fetch( "https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json" ) .then((response) => response.json()) .then((js..

import "../styles.css"; export const dataSource = [ { id: "1", key: "1", holdNumber: 1, grain: 22.31, bale: 33.213, totalHoldHatches: 3, width: 100, hatches: [ { hatchLength: 7.02, hatchWidth: 2.33 }, { hatchLength: 6.931, hatchWidth: 6.11 }, { hatchLength: 22.1, hatchWidth: 5.33 } ] }, { id: "2", key: "2", holdNumber: 3, grain: 41.233, bale: 42.11, totalHoldHatches: 2, hatches: [ { hatchLength:..

1. border-radius의 default값이 2px에서 2,4,6,8 px중 하나로 변경되었다. 예를 들어 Button의 default값은 2px에서 6px로 변경되었다. 기본색 또한 #1890ff에서 #1677ff로 변경되었다. 2. css에 대한 변경으로 css-in-Js를 채택하여서 기존 import를 할 때 antd/dist/antd.css를 사용 했던 것을 없앴다. 기본 스타일을 재설정 해야 하는 경우 importantd/dist/reset.css를 import하여 사용하면 된다. 3. LocaleProvider는 4버전에서 더 이상 사용되지 않기에 5버전에서 관련 폴더 antd/es/locale-provider 및 antd/lib/locale-provider를 제거했다. 4. 기본 제공 ..

React Hook을 사용할 때는 규칙이 있는데 그중 하나는 최상위 컴포넌트에 위치해야 한다는 것이다. 그렇기에 다른 컴포넌트에 함수를 만들어서 호출하고 싶을때 그 함수가 선언된 컴포넌트에서 훅을 사용하여 state를 할당해봤자 error가 뜨게된다. 그렇기에 필요한 변수를 담을 props를 parameter로 주고 사용할 컴포넌트에 함수를 끌어와서 props로 변수를 주면 된다.