패스트캠퍼스 챌린지 2일차 - 리액트의 리렌더링

 

 

오늘은 리액트의 리렌더링에 대한 내용과 이벤트 핸들링에 대해 공부하였다.

 

리액트의 장점 으로 많이 화자되는 것 중 리렌더링에 대한 부분이 있다.

리액트는 가상돔을 통한 컴포넌트 비교로 변경된 내용을 파악하고,

document 전체를 리렌더링하는 것이 아니라 변경된 내용이 사용되는 컴포넌트만 리렌더링한다.

 

이는 웹개발에 있어서 성능 최적화와 직결되는 장점이다. 

 

 

브라우저엔진(웹킷) 동작과정

 

 

성능 최적화하면 리플로우(reflow), 리페인트(repaint)의 개념을 알아야된다.

 

 

브라우저가 동작할때 리플로우는 배치, 리페인트는 그리기에 해당하는데,

리플로우는 플로우작업(DOM트리 + css/javascript 를 합쳐주면서 해당 돔요소의 크기와 위치에 배치하는 것)을 다시 하는 것을 의미한다

렌더트리를 기반으로 화면을 그리는 작업을 다시 할때(수정할때) 리페인트가 호출된다.

 

아래 코드는 강의에서 나온 코드가 아니라 직접 리플로우와 리페인트에 대해 검색하여 읽은 포스팅에 포함된 코드이다.

이처럼 통합해서 한번에 수정하느냐, 각각 대입하느냐에 따라 리플로우 호출 횟수가 달라진다.

성능 최적화를 위해 코드를 작성할때 리플로우와 리페인트를 줄이는 것에 대해 고려해야겠다.

(리액트에서는 가상돔을 이용한 별도의 비교 알고리즘이 적용된다.)

 

// bad
const body = document.body;
body.style.width = '50px';
body.style.height = '100px';
 
// good
const body = document.body;
body.style.cssText = 'width: 50px; heigh: 100px;';

 

네이밍룰(표기법)

    - 지난 강의에서 봤듯이 리액트의 커스텀 컴포넌트는 태그로 사용할때 첫글자가 대문자로 사용된다. (파스칼케이스)

    - 이벤트, 변수 등등 네이밍룰 표기법으로 카멜 케이스를 적용한다.

 

기본 문장 on click

• 카멜 케이스 (camel-case)        onClick
• 파스칼 케이스 (pascal-case)     OnClick
• 케밥 케이스 (kebab-case)        on-click 
• 스네이크 케이스 (snake-case)   on_click

 

전역변수를 사용해서 input 의 value 값이 변할때의 이벤트 (onChange)와 search 버튼을 클릭했을때의 이벤트를 구현했다.

 

See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen.

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

---

같이 읽으면 좋은 글  👇👇👇 

브라우저는 어떻게 동작하는가? - 네이버D2

HTTP 개요 - MDN

리액트 엘리먼트 렌더링

리액트 재조정(Reconciliation)