[React] 리액트란 무엇인가?

1.  컴포넌트 기반 UI

React는 컴포넌트(Component) 단위로 화면을 구성한다.
말 그대로 “화면을 이루는 구성 요소”를 하나하나 모듈처럼 나눠서 만드는 방식이다.

 

예시:

• Header.js – 상단 메뉴
• Main.js – 본문
• Footer.js – 하단 영역

이렇게 컴포넌트로 나누면,

• 중복 코드 제거
• 유지보수 편리
• 재사용 가능

덕분에 대규모 UI를 체계적으로 관리할 수 있다.

---

2.  선언형 프로그래밍 방식

React는 UI를 “선언형(Declarative)” 방식으로 정의한다.

 

선언형 vs 명령형

• 선언형(React): "무엇을 원하는지"만 명확하게 선언
  예: “이 버튼을 누르면 이 화면을 보여줘”
• 명령형(JavaScript 등): "어떻게 할 것인지" 일일이 지시
  예: 버튼 클릭 → DOM 선택 → 속성 수정 → 재랜더링...

🍝 선언형을 식당에 비유하자면:

"파스타 주세요" (메뉴만 말함)
vs
명령형은:
"면을 100g 삶고, 토마토를 썰고, 팬에 볶아서..." (모든 과정을 직접 지시)

 

React는 이처럼 결과만 선언하면, 나머지 과정은 알아서 처리해주는 방식이다.

 

그리고 이 선언형 방식의 핵심 동작 원리가 바로 State(상태) 인데,

▶ 우리가 화면에 보여지는 정보(데이터)를 State라는 변수에 담아두고,
이 값을 바꾸기만 하면 React가 알아서 해당 UI를 새로 그려준다

즉, 복잡한 DOM 조작 없이
▶ “상태만 바꾸면”
▶ “UI가 자동으로 반영되는 구조”

---

3.  빠른 화면 업데이트 (Virtual DOM)

React의 또 다른 강점은 빠른 렌더링 성능이다.

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

 

기존 웹은 자바스크립트가 DOM을 직접 수정할 때마다 업데이트가 된다:

DOM 수정 → Render Tree → Layout → Painting

 

업데이트할 때마다 전체 레이아웃을 다시 계산하는 Reflow, 화면 재그리는 Repaint가 발생

▶ 시간이 오래걸리다보니 많이 발생하는 경우 성능 저하로 이어지고 최악의 경우 사이트 마비

▶ 최소한의 DOM 수정을 해야한다 (업데이트를 모아서 !)

 

그래서 등장한 Virtual DOM,

React는 자동으로 업데이트를 모아서 해준다.

실제 DOM을 바로 수정하지 않고,
JavaScript로 만든 가상의 DOM(Virtual DOM)에 먼저 변경사항을 적용한 뒤,

🔁 변경 전후를 비교(Diffing)해서
⚡ 꼭 필요한 부분만 실제 DOM에 반영한다.

▶ 화면 업데이트는 눈에 띄게 빨라지고, 불필요한 렌더링을 줄일 수 있다.

---

🔚 마무리

React는

• 컴포넌트 기반 구조
• 선언형 개발 방식
• Virtual DOM을 통한 빠른 렌더링

이 세 가지 덕분에, 유지보수성과 성능 모두를 잡을 수 있는 현대적인 프론트엔드 개발 도구로 널리 쓰이고 있다.