리액트로 만든 서비스

리액트 사용량

기술적 특징

특징 1

컴포넌트를 기반으로 UI를 표현한다.

컴포넌트 : 구성요소 → 화면을 구성하는 요소 → UI를 구성하는 요소  컴포넌트별로 관리하기 때문에 마치 레고를 조립하듯이 사용한다.

컴포넌트를 자바 스크립트 파일로 모듈화 = 중복 코드를 제거

중복 코드 발생 = 유지 보수가 힘듦

특징 2

선언형 프로그래밍으로 동작하기 때문에 업데이트 구현이 쉽다.

선언형 프로그래밍

과정은 생략하고 목적만 간결히 명시하는 방법

예시)
레스토랑에서 "크림 파스타 하나 주세요"와 같이 주문하는 것

명령형 프로그래밍

목적을 이루기 위한 모든 일련 과정을 설명하는 방식

예시)
1.주방으로 가서 면을 100g 꺼낸다.
2.끓는 물에 10분간 삶는다.
3.팬에 기름을 두르고 크림 소스를 면과 함께 볶는다.
4.접시에 예쁘게 담는다.

원리

State : 현재 Component의 상태를 저장하는 특수한 변수

State의 값 변경 = Component가 변경된 State값에 따라 각각 다른 UI 랜더링

*랜더링(Rendering) : UI요소를 화면에 나타내는 것

state값이 1일 때는 1번 UI를 랜더링
state값이 2일 때는 2번 UI를 랜더링

업데이트를 위한 복잡한 동작을
직접 정의할 필요 없이
특정 변수의 값을 바꾸는 것 만으로
화면을 업데이트 할 수 있다.

특징 2

화면 업데이트 구현이 쉽다.

브라우저의 렌더링 과정 (Critical Rendering Path)

1. DOM (Document Object Model) 문서 객체 모델

HTML, CSS를 각각 브라우저가 이해하기 쉽게 객체형태로 변환한다.

2. Render Tree ( 웹 페이지의 청사진 )

• DOM : 요소들의 위치, 배치, 모양
• CSSOM : 요소들의 스타일과 관련된 모든 정보

3. Layout( 요소의 배치를 잡는 작업 )

4. Painting( 실제로 화면에 그려내는 과정 )

JavaScript가 DOM을 수정하면 업데이트 발생

(수정될 때 마다 페이지를 다시 그리므로 성능 저하)

예시 코드

리스트 추가하기! 버튼을 클릭하면, 하단에 목록을 추가하는 JavaScript & HTML 코드

• 3,000번 DOM 수정
• 3,000번의 Reflow, Repaint 발생
• 성능 측정 : 4,500ms (4.5초)
• 4.5초 동안 웹 페이지가 작동하지 않음

3,000번 실행 결과

개선

• list변수 선언
• 예시에서의 innerHTML을 바로 선언하지 않음
• list 변수에 <li>태그를 3,000번 추가
• 반복문 내부에서 DOM 수정이 발생하지 않음
• 마지막 코드에서 DOM수정 한 번 발생
• 성능 측정 : 250ms (0.25초), 약 22배 향

Virtual DOM 이란?

• DOM을 자바스크립트 객체로 흉내낸 것으로 일종의 복제판
• React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영
• 연습 스윙 같은 느낌이라고 생각하면 된다.

Virtual DOM이 업데이트 된 사항들을 모아뒀다가 한번에 일괄 적용하는 개념