반응형 개발/React52 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 2023. 10. 14. useState와 클로저 useState와 클로저 함수형 리액트에서 컴포넌트가 리렌더링 된다는 것은 함수가 종료되었다가 다시 실행되는 것이다. 그럼 종료된 함수가 갖고 있던 state를 어떻게 기억하고 이전 state와 현재 state를 비교하는 걸까? 답은 클로저에 있다. 클로저 클로저는 함수가 생성될 당시의 환경을 함수가 종료된 후에도 기억하는 속성이다. 아래 코드에서 볼 수 있듯, add()함수가 종료되고 재 실행되어도 foo 변수의 이전값을 기억하고 foo += 1을 수행하고 있다. // 참고 : https://www.fronttigger.dev/2022/react/react-hook-closure const add = (function getAdd() { let foo = 1 return function () { foo.. 2023. 9. 13. 이전 1 2 3 4 5 ··· 13 다음 반응형
