전체 글18 Memoization 과 Closer 리액트를 사용하다 보니 불필요한 리랜더링을 막아 성능을 최적화 하기 위해 useMemo라는 것을 쓰는데 뭔지 알고싶어 공부하다가 Memoization에 대해 알게 되었습니다. Memoization은 간단하게 한번 동작했던 키 혹은 상태를 저장해두고 해당 키를 사용한 동작을 다시 할 때 이전에 결과값에서 가져오는 알고리즘입니다 아래의 코드를 보면 어?? 왜 함수를 재 호출했는데 cache의 값이 초기화되지않지? 하는 의문이 생길 수 있습니다. 이를 통해 클로저의 개념까지 알아 볼 예정입니다. function memoize(func) { const cache = {}; return function (...args) { const key = JSON.stringify(args); // 인수 배열을 문자열로 변.. 2023. 10. 19. 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 2 3 4 5 다음
