rendering [React] 배열 렌더링(Array Rendering) animals 배열을 react에서 rendering하는 3가지 방법을 정리해봤다. 말그대로 배열의 요소들을 Animal component에 하나하나 다 작성해서 rendering하는 방법이다. 새로운 Profile component를 만들어서 Animal component 내부에서 사용할 수 있다. component를 이용하면 반복되는 코드를 줄일 수 있고, 또 component를 재사용할... ReactrenderingReact React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM 브라우저 렌더링 과정 (파싱-렌더-레이아웃-페인팅) 웹 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 Critical Rendering Path 라고 한다. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다. 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다.... renderingCSSbrowserhtmlCSS ⛓️ 리액트 렌더링 과정 📍 index.js => App.js => 하위 route로 지정된 컴포넌트들 1. render index.js App.js 상태변화 === 렌더링 된 엘리먼트 업데이트 React의 element는 불변객체이므로 생성 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. - 때문에 컴포넌트에서 새로운 상태가 반환될 때 마다 변경된 부분을 계산하기 위한 과정을 밟는다. 결과적으로 Reac... ReactrenderingReact ⛏ state 선언 위치에 따른 rendering 차이 너무도 당연한 얘기를 실험과 함께 정리해보고자 한다. 솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할까?', 'state를 어떻게 두면 rendering이 많이 일어날까?' 여러 경우를 비교하는게 딱히 어려운 일도 아닌데, 자꾸 미뤄온 스스로를... ReactStaterenderingReact 브라우저 렌더링 DOM 및 CSSOM 트리 생성 바이트 → 문자 → 토큰 → 노드 → 객체 모델 HTML 마크업 👉 DOM(Document Object Model) CSS 마크업 👉 CSSOM(CSS Object Model) (추가) CSS가 트리 구조인 이유? CSS는 하향식으로 적용하므로! Render Tree 생성 DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성 렌더링 트리는 각 요소의 레... webrenderingrendering [React] 불필요한 렌더링 줄이기 component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문 component props에 연산에 따라 객체가 변할 수 있는 경우, useMemo를 감싸주자 (복잡한 연산이 필요할 경우에만 useMemo를 쓰자. 안그러면 메모리 낭비된다고 함)... renderingReactReact 브라우저의 렌더링 과정 브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 이러한 텍스트를 시각적인 픽셀로 렌더링하기 위해 HTML을 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 합니다. 브라우저의 렌더링 엔진은 다음과 같은 과정을 통해 응답받은 HTML 문서를 파싱하여 브라우저가... 브라우저renderingDOMbrowser렌더링브라우저 렌더링Render TreeCSSOMCSSOM opengl 4. X (스크린 렌 더 링 - 배경 렌 더 링) off - screen rendering 데 이 터 를 직접 표시 되 지 않 은 framebuffer 에 저장 하여 추 후 렌 더 링 수 요 를 충족 시 키 거나 텍 스 처 스티커 texture 에 직접 저장 하 는 것 이 매우 유연 합 니 다.주의해 야 할 것 은 서로 다른 플랫폼 데이터 구조 가 서로 다른 관계 이기 때문에 서로 다른 플랫폼 을 대상 으로 하 는 framebuffer 형식 을 만 들 고 설정 해 야 합 니 다.예... OpenGLrenderingoff-screen
[React] 배열 렌더링(Array Rendering) animals 배열을 react에서 rendering하는 3가지 방법을 정리해봤다. 말그대로 배열의 요소들을 Animal component에 하나하나 다 작성해서 rendering하는 방법이다. 새로운 Profile component를 만들어서 Animal component 내부에서 사용할 수 있다. component를 이용하면 반복되는 코드를 줄일 수 있고, 또 component를 재사용할... ReactrenderingReact React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM 브라우저 렌더링 과정 (파싱-렌더-레이아웃-페인팅) 웹 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 Critical Rendering Path 라고 한다. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌더 트리를 생성한다. 브라우저는 우선 필요한 리소스(HTML, CSS, JS, 이미지, 폰트..)를 서버에 요청하고, 응답으로 받아와야 한다.... renderingCSSbrowserhtmlCSS ⛓️ 리액트 렌더링 과정 📍 index.js => App.js => 하위 route로 지정된 컴포넌트들 1. render index.js App.js 상태변화 === 렌더링 된 엘리먼트 업데이트 React의 element는 불변객체이므로 생성 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. - 때문에 컴포넌트에서 새로운 상태가 반환될 때 마다 변경된 부분을 계산하기 위한 과정을 밟는다. 결과적으로 Reac... ReactrenderingReact ⛏ state 선언 위치에 따른 rendering 차이 너무도 당연한 얘기를 실험과 함께 정리해보고자 한다. 솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할까?', 'state를 어떻게 두면 rendering이 많이 일어날까?' 여러 경우를 비교하는게 딱히 어려운 일도 아닌데, 자꾸 미뤄온 스스로를... ReactStaterenderingReact 브라우저 렌더링 DOM 및 CSSOM 트리 생성 바이트 → 문자 → 토큰 → 노드 → 객체 모델 HTML 마크업 👉 DOM(Document Object Model) CSS 마크업 👉 CSSOM(CSS Object Model) (추가) CSS가 트리 구조인 이유? CSS는 하향식으로 적용하므로! Render Tree 생성 DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성 렌더링 트리는 각 요소의 레... webrenderingrendering [React] 불필요한 렌더링 줄이기 component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문 component props에 연산에 따라 객체가 변할 수 있는 경우, useMemo를 감싸주자 (복잡한 연산이 필요할 경우에만 useMemo를 쓰자. 안그러면 메모리 낭비된다고 함)... renderingReactReact 브라우저의 렌더링 과정 브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 이러한 텍스트를 시각적인 픽셀로 렌더링하기 위해 HTML을 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 합니다. 브라우저의 렌더링 엔진은 다음과 같은 과정을 통해 응답받은 HTML 문서를 파싱하여 브라우저가... 브라우저renderingDOMbrowser렌더링브라우저 렌더링Render TreeCSSOMCSSOM opengl 4. X (스크린 렌 더 링 - 배경 렌 더 링) off - screen rendering 데 이 터 를 직접 표시 되 지 않 은 framebuffer 에 저장 하여 추 후 렌 더 링 수 요 를 충족 시 키 거나 텍 스 처 스티커 texture 에 직접 저장 하 는 것 이 매우 유연 합 니 다.주의해 야 할 것 은 서로 다른 플랫폼 데이터 구조 가 서로 다른 관계 이기 때문에 서로 다른 플랫폼 을 대상 으로 하 는 framebuffer 형식 을 만 들 고 설정 해 야 합 니 다.예... OpenGLrenderingoff-screen