반응형 개발/React54 state 업데이트는 비동기라기보다는 스냅샷이다. state 업데이트는 비동기라기보다는 스냅샷이다. 아래와 같이 코드를 작성하면 console.log(state)는 1이 아닌 0이 찍힌다. const Component = () => { const [state,setState] = useState(0) return ( { setState(1) console.log(state) // 0 }}> ) } setState가 비동기로 작동해서 console.log보다 나중에 실행되기 때문이라고 생각했는데, 그보다는 스냅샷이 맞는 표현이다. { setState(1) // 다음렌더링에서 state를 1로 바꿀 준비를 한다. console.log(state) // 0 }}> 리액트는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. .. 2024. 1. 7. zustand에서 functional update가 가능한 setState만들기 useState의 setState는 다음과 같이 이전값을 통한 functional update가 가능하다. setIcons(prev => { const updatedIcons = prev.map(i => { if (i.id === icon.id) { return { ...i, alt: e.target.value }; } return i; }); return updatedIcons; }); state를 전역으로 관리하기 위해 zustand를 이용할때가 있는데, 지금까지는 zustand에서 setState를 다음과 같이 만들었었다. import { IconType } from '@/components/Icon'; import { create } from 'zustand'; interface UnderbarS.. 2023. 11. 6. JSX문법에서 단일 root 태그로 래핑해야 하는 이유 JSX문법에서 단일 root 태그로 래핑해야 하는 이유 공식문서에는 이렇게 나온다 JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다. 두 객체를 배열로 래핑하지 않고는 함수에서 두 객체를 반환할 수 없습니다. 이는 두 개의 JSX 태그를 다른 태그나 Fragment로 래핑하지 않고는 반환할 수 없는 이유를 설명합니다. 잘 이해가 안가서 chatGPT한테 물어봤다. function MyComponent() { return ( jj hhhi ); } 위 JSX 코드가 JS 객체로 변환되면 다음과 같다. { type: 'div', props: { children: [ { type: 'div', props: { children: [ { type: 'span', props: {.. 2023. 10. 14. react hook life cycle useEffect import { useEffect, useState } from "react";const App = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("후", count); return () => console.log("전", count); }, [count]); return ( setCount(count + 1)}>ffff {count} );};export default App;에서는 다음과 같이 clear 함수에서 업데이트 되기 직전 count를 계산하고, 업데이트 후에 콜백에서 업데이트 직후의 count를 계산한다. 2023. 10. 14. 이전 1 2 3 4 5 ··· 14 다음 반응형
