본문 바로가기

useCallback2

[React] react 렌더링 방식 이해와 memoization 가상 DOM과 부분 렌더링 방식이해가상 DOM의 작동 방식가상 DOM 생성: 브라우저의 실제 DOM과 별개로 메모리에 가상 DOM 객체를 생성합니다.상태 변화 감지: 데이터나 상태가 변경되면, 새로운 가상 DOM 트리가 생성됩니다.차이점 계산(Diffing): 기존 가상 DOM과 새 가상 DOM을 비교하여 정확히 어떤 부분이 변경되었는지 파악합니다.부분 업데이트(Reconciliation): 변경된 부분만 실제 DOM에 적용합니다.랜더링 최적화의 필요성상태가 변경됨에 따라 컴포넌트가 재렌더링되는 과정에서 하위 컴포넌트 역시 재렌더링 되어 일부 불필요한 렌더링이 발생할 수 있습니다.예를 들어 Context API 의 Context 및 state 값이 변경되면, 해당 컴포넌트의 모든 자식 컴포넌트들도 기본적.. 2025. 3. 16.
Hooks Hook 을 제대로 알지 못하고 리액트 개발을 시작하는 것은 니퍼를 들고 나사못을 빼는 헛짓거리 일거 같아 확실히 정리하기 위해 적어두려함 Hook 이 무엇이냐? 기존 React 의 class 바탕의 복잡한 코드를 작성할 필요 없이 여러 React 기능을 functional component 에서 쉽게 사용 할 수 있게 해주는 것이 Hook 인 것이다. 중요한 부분은 functional component 에서 state 를 가질 수 있게 된 것과 기존의 React 에서는 class component, render(복잡한 라이프 사이클과 그에 대응하는 메서드들 ..) 이런 귀찮은 짓을 안하고 하나의 function 에서 모든 것을 할 수 있게 된 점 정도로 정리할 수 있을 것 같다. 중요 Hook 비구조화.. 2022. 2. 22.