렌더링 2

[React - Hook] useRef가 뭘까 ? 어떻게 사용하지 ? (예제)

useRef 란? - Reference를 사용하기 위한 Hook Reference ? 특정 컴포넌트에 접근할 수 있는 객체 사용법 const ref = useRef(초깃값); 특징 - useRef Hook은 Reference object를 반환한다. { current : value } - current란 현재 참조하고 있는 Element이다. - Reference object는 수정이 가능하다. - 반환된 ref는 전 생애주기를 통해 유지된다. (즉, 컴포넌트가 계속 렌더링 되더라도 unmount 되기 전까진 값을 유지한다. ) - useRef Hook은 내부의 데이터가 변경되더라도 별도로 알리지 않는다. (즉, current 속성을 변경한다고 재렌더링이 되지 않는다. ) 정리 - useRef를 사용한 ..

FE/REACT 2022.06.14

[FE] 브라우저 렌더링과 page reflow & repaint

웹 페이지 렌더링 - 브라우저가 HTML파일을 화면에 그려내는 과정 1. 파싱 : HTML파일을 DOM으로 변환 (파싱) 2. 스타일 계산 : CSS를 CSSOM으로 파싱 3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)생성 4. 페인트 : 렌더트리가 생성되면 , 이 트리를 따라 페인트 기록 생성 (페인트 기록 ? 요소를 렌더링하는 순서 저장, 레이어를 나눠 시각적인 부분 그리는 작업 진행) 5. 컴포지팅 : 각 레이어를 스크린에 픽셀로 표현, 레이어들을 합성해 페이지를 그림 page reflow & repaint - HTML 구조상의 변화, CSS의 변화가 있으면 reflow와 repaint 과정을 거치게 된다. 1. reflow - 레이아웃 (너비 ,높이)등 변경 시 영향받는 모든..

FE 2022.05.19