Reflow ,Repaint
Reflow ,RepaintReflow란?웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을때, 변화된 레이아웃을 다시 계산 하는 과정을 말한다.크기 관련 속성width , height , padding , margin 등위치 관련 속성position , top , left 등레이아웃 속성display, flex, grid 등폰트 크기 관련 속성font-size , font-weight 등Repaint 란?웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하여 렌더 트리에 적용하는 과정색상 관련 속성color , background-color 등테두리 관련 속성border-color , border-radius 등Reflow 와 Repaint 의 성능상 차이점Reflow..
2024. 8. 1.
React useState Hook의 반환 값이 객체가 아닌 배열인 이유
1. 구문 간결성 객체를 사용하는 경우 객체의 속성을 개별적으로 추출 해야한다. 배열을 사용하는 경우에는 구조 분해 할당을 통해 간단하게 요소에 접근 할 수 있어 코드가 간결하고 가독성 있게 만들어준다. const user = { name: 'John', age: 30, city: 'New York' }; // 객체 속성 구조 분해 할당 const { name, age, city } = user; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York' const numbers = [1, 2, 3, 4, 5]; // 배열 요소 구조 분해 할당 const [first, second, third] = number..
2023. 7. 4.
