개발 이론9 React component life cycle 리액트가 최소 단위로 컴포넌트를 사용하는 만큼 필수적으로 알아야하는 항목에 컴포넌트 생명주기에 대한 질문이 많다고 들었습니다 컴포넌트 생명주기는 컴포넌트의 생성(mount) , 변경(update) , 제거(unmomunt) 가 있으며 기존의 프로젝트 진행시에는 useEffect로 처리했습니다 chat GPT나 구글검색을 통해 정보를 보면 다양한 함수들이 있는데 막상 사용할때 보면 useEffect로 모두 처리하는것에 의아함을 느껴 찾아보았습니다 2019년 이전 리액트에는 함수형컴포넌트 방식에서는 라이프사이클 API와 state를 사용할수 없었기에 클래스형 컴포넌트을 주로 사용했었고 이후 리액트 훅의 도입으로 함수형 컴포넌트에서의 문제가 해결되면서 함수형 컴포넌트가 클래스형 컴포넌트 보다 선언하기 편하고 .. 2023. 10. 2. 브라우저 랜더링3 (최적화) 이전글에서 아래와 같이 설명을 했습니다 CPU 가 레이아웃을 처리하고 레이어를 업데이트 함 메인메모리에서 paint라는 과정으로 비디오 메모리로 전달을함 이후 GPU에서 Composite 레이어 작업이 실행됨 위의 과정에서 레이어 분리 composite으로 layer tree 업데이트나 페인팅과정을 생략하면 성능적으로 좋다 CPU 보다 GPU의 연산능력이 비용이 적다 따라서 랜더링 성능을 개선하려면 레이아웃과 페인팅을 최소한으로 발생시키고 되도록이면 composite으로 대체한다 레이어를 잘 분리하고 불필요한 레이어를 제거한다 변경사항에 대해 레이아웃을 최소한으로 발생시키려면 Reflow 가 일어나는 속성들 position width padding 등을 줄이고 ex) left top 을 transfrom.. 2023. 9. 20. 브라우저 랜더링 2(랜더링엔진, 최적화) 저번 글에 이어 브라우저랜더링에 대해 알아보겠습니다 중요랜더링경로 중요 랜더린 경로는 브라우저가 HTML CSS Javascript를 화면에 픽셀로 변환하는 일련의 단계이며 이를 최적화 하는 것이 랜더링 성능향상에 영향을 줍니다 위의 그림에 해당하는 단계를 중요 랜더링 경로라고하며 간단하게 4단계로 나누어져있다 생각하고 이해하면 편할 것 같습니다 1) DOM Tree 구축을 위한 파싱 - HTML 문서를 파싱해서 Parse Tree를 생성하고 브라우저가 DOM node(태그)로 구성된 트리 DOM 을 생성하게 됩니다 - HTML을 파싱하는 도중에 CSS 파싱 역시 실행됩니다 - CSS 파서는 HTML과 달리 전체파일을 모두 다운로드 할때까지 시작할 수 없습니다 - CSSOM(CSS Object Model.. 2023. 9. 20. 브라우저 랜더링 1(과정) 브라우저 랜더링을 알기 전 간단하게 알아보자 1) 브라우저 구성요소 2) 각각의 요소들이 어떤기능을 해서 브라우저가 랜더링하는지 브라우저 구성요소 다음과 같은 요소들이 있고 설명은 아래와 같다 사용자 인터페이스 : 주소표시줄, 이전 및 다음 버튼 새로고침 북마크등 보여주는 페이지를 제외한 부분 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 랜더링엔진 : 요청한 콘텐츠를 표시 요청을 통해 받아온 정보를 HTML과 CSS로 파싱해서 화면에 표시 통신레이어 : HTTP요청과 같은 네트워크 호출에 사용됨 플랫폼 독립적인 인터페이스이고 각 플랫폼하부에서 진행됨 자바스크립트 해석기 :자바스크립트 코드를 해석하고 실행 자료 저장소 :자료를 저장하는 계층 쿠키, 로컬스토리지 등 UI 백엔드 : .. 2023. 9. 20. 이전 1 2 3 다음
