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 } 라는 코드를 적는 순간 새로운 참조가 만들어지는 줄 알았다..하지만 정확히 보면 그게 아니긴 하다!여기서 중..

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

서버컴포넌트 ?React 18에서 도입된 개념으로, Next.js 13의 App Router에서 기본적으로 사용된다!서버에서 HTML을 생성하고, 클라이언트로 필요한 데이터만 전달!서버 컴포넌트는 서버에서만 실행되고, 클라이언트로는 HTML과 필요한 데이터만 전달!즉, 서버 컴포넌트의 JavaScript 코드는 클라이언트로 전송되지 않음클라이언트는 서버에서 생성된 HTML을 받아서 렌더링할 뿐, 서버 컴포넌트의 로직이나 코드는 클라이언트에서 실행되지 않아용그래서 web api와 같은 데이터는 사용할 수 없음!이벤트 핸들러도 마찬가지~클라이언트에서 Hydration이 필요하지 않거나 최소화됨!서버에서만 실행되기 때문에, 민감한 데이터나 로직을 안전하게 처리할 수 있다 (보안 굿)장점클라이언트 번들 크기 감..