Yoo HeehyeonYoo Heehyeon

1. 리액트는 왜 탄생했는가?

리액트가 나오기 전에는 jQuery처럼 개발자가 DOM을 직접 조작하는 방식이 흔했다. 화면 요소를 하나씩 집어서 바꾸는 식이라, 규모가 커질수록 유지보수가 급격히 어려워졌다.

• "이 버튼을 누르면 저 텍스트를 빨간색으로 바꿔라"처럼 직접 명령해야 했다.
• 앱이 커지면 누가 어디서 화면을 바꿨는지 추적하기가 거의 불가능해졌다.

리액트는 이 문제를 줄이기 위해 등장했다. 핵심 발상은 단순하다. 데이터가 바뀌면 UI는 그 상태를 기준으로 다시 계산하면 된다는 것이다.

2. 가상 돔 (Virtual DOM)

가상 DOM은 리액트가 화면 갱신 비용을 줄이는 핵심 아이디어다. 실제 DOM 조작은 상대적으로 느리고 비싸기 때문에, 리액트는 먼저 메모리에서 변경 사항을 계산한다.

흐름은 이렇다.

1. 데이터가 바뀌면 메모리 안에 새 가상 DOM을 만든다.
2. 이전 가상 DOM과 새 가상 DOM을 비교한다. 이 과정을 Diffing이라고 부른다.
3. 실제 DOM에는 바뀐 부분만 반영한다. 이 갱신 과정이 Reconciliation이다.

3. 선언형 프로그래밍 (Declarative)

리액트는 선언형 프로그래밍 방식을 택한다. 개발자는 화면이 어떤 상태여야 하는지만 말하고, 실제 갱신 과정은 리액트가 맡는다.

• 명령형: 택시를 잡고, 기사에게 경로를 하나씩 지시하는 방식이다. 어떻게 갈지를 직접 제어한다.
• 선언형: 택시 앱에서 목적지만 찍는 방식이다. 무엇을 원하는지만 말한다.

리액트에서도 같다. 개발자는 상태에 따라 화면이 어떻게 보여야 하는지만 정의하면 되고, DOM을 어떤 순서로 바꿀지는 리액트가 처리한다.