React 탄생

React는 왜 만들어졌을까?

React는 2011년경 Meta(당시 Facebook)의 소프트웨어 엔지니어 Jordan Walke가 개발하기 시작했으며, 2013년에 오픈소스로 공개되었다.

이후 React는 컴포넌트 기반 UI 개발 방식과 선언형 프로그래밍 방식을 제시하며 현재 가장 많이 사용되는 프론트엔드 라이브러리 중 하나가 되었다.

---

React가 등장하기 전

초기의 웹사이트는 대부분 정적인 페이지였다.

사용자가 버튼을 클릭하면 서버에 요청을 보내고, 새로운 HTML을 받아 페이지 전체를 다시 그리는 방식이 일반적이었다.

사용자 클릭
↓
서버 요청
↓
새로운 HTML 응답
↓
페이지 전체 새로고침

하지만 웹 서비스가 발전하면서 페이지 전체를 새로고침하지 않고 화면의 일부만 변경해야 하는 기능이 많아지기 시작했다.

예를 들어 다음과 같은 기능들이다.

• 좋아요 버튼
• 댓글 기능
• 실시간 채팅
• 뉴스피드
• 알림 기능

이러한 기능들은 사용자 경험을 위해 화면의 일부분만 빠르게 업데이트해야 했다.

---

DOM을 직접 조작하던 시절

당시 개발자들은 JavaScript를 이용해 직접 DOM을 수정했다.

document.getElementById("title").innerText = "안녕하세요";

간단한 기능에서는 큰 문제가 없었다.

하지만 서비스 규모가 커질수록 직접 DOM을 조작하는 방식은 점점 관리하기 어려워졌다.

예를 들어 사용자의 이름이 변경되면 다음과 같은 여러 화면을 모두 수정해야 했다.

• 프로필 영역
• 헤더 영역
• 댓글 작성자
• 채팅 목록
• 사용자 정보 카드

만약 한 곳이라도 업데이트를 놓치면 데이터와 화면이 서로 다른 상태가 되는 문제가 발생했다.

즉, 화면이 복잡해질수록 "어디를 수정해야 하는지" 개발자가 직접 관리해야 했고, 유지보수도 어려워졌다.

---

Facebook이 직면한 문제

당시 Facebook은 수억 명의 사용자가 이용하는 거대한 서비스였다.

특히 뉴스피드는 사용자의 활동에 따라 화면이 실시간으로 계속 변경되는 구조였다.

DOM을 직접 수정하는 방식으로는 복잡한 UI와 상태를 안정적으로 관리하기 어려워졌고, 코드의 유지보수 비용도 계속 증가했다.

그래서 Facebook 개발자들은 새로운 접근 방식을 고민하게 된다.

 

개발자가 화면을 어떻게 바꿀지 일일이 명령하지 말고,
현재 데이터가 어떤 상태인지만 알려주면
화면은 알아서 변경되도록 만들 수 없을까?

 

이 아이디어가 바로 React의 시작이었다.

---

React의 핵심 아이디어

React는 UI는 현재 상태(State)의 결과물이라고 생각한다.

예를 들어 사용자 이름을 상태로 관리한다면 다음과 같이 작성할 수 있다.

const [name, setName] = useState("Kim");

이후 이름을 변경할 때도 화면을 직접 수정하지 않는다.

setName("Lee");

개발자는 단순히 상태만 변경하면 된다.

그러면 React가 변경된 상태를 기반으로 화면을 다시 계산하고 필요한 부분만 업데이트한다.

즉, React는

• "화면을*어떻게 수정할지"가 아니라
• "현재*데이터가 무엇인지"에 집중하는 선언형(Declarative) 방식을 사용한다.

---

Virtual DOM의 등장

React가 많은 주목을 받은 이유 중 하나는 Virtual DOM이라는 개념이다.

브라우저의 실제 DOM을 직접 수정하는 작업은 비용이 크고 성능에도 영향을 줄 수 있다.

React는 메모리 안에 **Virtual DOM(가상 DOM)***을 만들고, 상태가 변경될 때 이전 Virtual DOM과 새로운 Virtual DOM을 비교한다.

State 변경
↓
새로운 Virtual DOM 생성
↓
이전 Virtual DOM과 비교(Diffing)
↓
변경된 부분만 실제 DOM 업데이트

이 과정을 통해 화면 전체를 다시 그리는 것이 아니라 변경된 부분만 효율적으로 업데이트할 수 있다.

 

참고로 Virtual DOM이 실제 DOM보다 항상 빠른 것은 아니다. React의 핵심 장점은 성능 자체보다 복잡한 UI를 일관성 있게 관리할 수 있도록 도와주는 것에 있다.

---

React가 해결하고자 했던 문제

React가 해결하려고 했던 문제는 매우 단순했다.

 

"개발자가*화면을 직접 조작하지 말고, 데이터가 변경되면 화면도 자동으로 변경되도록 만들자."

 

이 아이디어를 바탕으로 React는

• State
• Component
• Props
• Virtual DOM
• 선언형 UI

와 같은 핵심 개념을 발전시켰고, 오늘날까지도 React의 중심 철학으로 이어지고 있다.

---

참고 자료

React GitHub Repository
https://github.com/facebook/react

GitHub - react/react: The library for web and native user interfaces.

 

React 공식 소개 영상
https://www.youtube.com/watch?v=GW0rj4sNH2w