React 이벤트 처리 방식React는 효율적이고 일관된 이벤트 처리를 위해 이벤트 위임(Event Delegation)과 합성 이벤트(Synthetic Event)를 사용한다이벤트 위임 (Event Delegation)React는 상위 요소에 하나의 리스너만 추가 이벤트를 위임해서 사용한다.각 요소에 리스너를 달지 않고, React Root에 1개만 설치이벤트 버블링을 이용해 어떤 요소가 클릭됐는지 판단동적으로 추가/삭제되는 요소도 자동 처리리스너 개수가 항상 일정 - 메모리가 효율적임 ! // vanila Js// 버튼 1000개 = 리스너 1000개 = 메모리 낭비button1.addEventListener('click', handler);button2.addEventListener('click',..

돌아보기..개발자로 일을 하면서 Redux와 zustand를 가장 많이 사용한 것 같은데 정작 정리한적이 한번도 없어서 한번 돌아보자...................................정리하면서 헷갈렸던 부분들이 많이 명확해졌다..내가 구조분해 할당에 대해 약간 오해하던 부분도 좀 명확하게 풀렸고 참조형 데이터를 구조분해할당 없이 구독할 때, 무조건 리렌더링 한다고 이상한 오해를 하고 있었는데 그것도 풀려버림!구조분해할당 대한 오해..const { count, items } = useStore(state => state);위 코드에서 나는 단순히 const { count, items } 라는 코드를 적는 순간 새로운 참조가 만들어지는 줄 알았다..하지만 정확히 보면 그게 아니긴 하다!여기서 중..

뭔소리니?우선 결론부터 말하고 들어가겠다 “불필요한 리렌더링”의 본질은 관심 없는 데이터 변경에도 리렌더링되는 것!context에 대해서 오해를 하고 있었다.. Provider가 하위의 모든 컴포넌트가 context가 바뀔 때마다 리렌더링 되는줄 알았다.왜? 컴포넌트는 부모 컴포넌트가 리렌더링되면 리렌더링 되니까..예를들어 아래 Provider는 number가 바뀔 때마다 리렌더링이 되니까 하위 children이 모두 리렌더링 되는 줄 알았다import { ReactNode, useState } from "react";import { NumberContext } from "./numberContext";interface NumberProviderProps { children: ReactNode;}exp..

Suspese는 많이 쓰이기도 하지만, SSR, SSG 기반의 Page router의 next와 React Server Component(HTML Streaming) 기반의 App router에서의 용도가 다르다시간이 지나며 렌더링 전략이 고도화 되면서 suspense의 역할이 더욱더 중요해졌다고 볼 수 있을 것 같다기본적으로 선언적으로 대기 상태를 보여준 점에서 개발자에게 아주 친절한 날먹 기술 중 하나지만.. 날먹을 어떻게 했는지 파헤쳐보자!그리고 우선 이 글을 읽기 전에 SSR과 RSC의 차이점에 대해 반드시 알아보고 오도록하자!https://duckgugong.tistory.com/399Suspense?Suspense는 React에서 비동기 데이터 로딩 상태를 관리하고, 데이터가 준비되지 않은 동..