3. 아주 짤막한 React의 탄생 및 핵심 개념

많은 사람들이 프론트엔드 개발 분야를 리액트 전과 후로 나누기도 하고,

혹자는 리액트가 실질적으로 프론트엔드 분야를 만들었다고 이야기 한다.

 

역사

 

웹 앱의 규모가 커지면서 파일들의 관리가 어려워졌고, JS의 중요성이 점점 커지게 되었다.

전통적인 웹은 페이지마다 각각 HTML,CSS,JS 파일을 가지고 있어야 했고, 페이지를 이동할 때 마다 이를 주고받아 로딩 속도가 느렸다.

 

SPA(Single Page Application)가 등장하면서 위 파일들을 1회만 로드하고, JS를 통해 DOM을 조작하게 되었다.

 

내가 미취학 아동이었던 시절, 2006년에 Jquery가 발표되면서 세상의 표준으로 자리잡았고,

이후엔 구글의 Angular가 이를 활용하여 꽉 잡고 있었다고 한다.

 

교내 기숙사에서 시작된 페이스북은 2010년대에 접어들며 가파르게 확장되고, 기능이 점점 많이짐에 따라 굉장히 그 코드가 복잡했다.

새로운 기능을 추가하고, 유지보수 하기조차 어려워진 상황에서 효율적인 코드 관리가 필요했고, 리액트를 만들어내게 되었다.

 

이후 2013년 오픈소스로 릴리즈되고, 업그레이드를 거듭하며 지금의 위치를 갖게 되었다.

 

핵심 개념

 

리액트의 핵심 개념은 가상 DOM과 Component라고 할 수 있다.

 

먼저 DOM이 무엇이냐?

이 DOM(Document Object Model) 개념도 조금 생소했는데, HTML코드가 브라우저에서 동작하게 되면 DOM이 된다. 직역하자면 문서 객체 모델인데, JS에서 HTML의 요소들을 사용할 수 있도록 하는 객체 모델이다.

 

이러한 DOM은 많은 일을 수행하다 보니 오류가 발생하고, 브라우저가 다운되는 일이 발생했다. 모든 요소 하나하나를 지정해주어야 하기에 다양한 이벤트를 처리하기 어려웠다.

 

그래서 리액트는 이 DOM 조작을 자동으로 처리하여 화면에 구현한다.

Virtual DOM에서 이를 미리 처리하고 저장한 후 실제 DOM과 동기화한다.

이 덕분에  훨씬 가볍고, 빠른 리렌더링이 가능해졌고, 데이터의 흐름, 요소들 간의 연관성을 파악하여 코드의 퀄리티가 상승하게 되었다.

 

 

다음으로 리액트는 컴포넌트들을 모아 웹사이트를 구성한다.

이 컴포넌트는 따지고보면 하나의 함수인데, 리액트 엘리먼트를 리턴하게 된다.

 

내부에서 어떤 데이터를 사용하든 동일한 DOM 구조가 반환되고, 같은 컴포넌트를 사용하여 동일한 DOM 구조를 가진 인스턴스를 만들 수 있다. 따라서 컴포넌트가 반환하는 엘리먼트가 다른 곳에서도 쓰일 수 있도록 컴포넌트를 만들어야 한다. 그러기 위해 추상화가 중요하다.

 

 

One More Thing

 

또한 업그레이드 역사를 살펴보니, 2019년 16.8.0버전이 릴리즈 되면서, Hook이 도입되었다.

이 덕분에 함수를 사용하여 개발하는 것이 가능해졌다.

 

내가 처음 리액트를 배우기 시작한 시점은 이 이후이기에, 나는 함수형으로 모든 코드를 학습했고, 작성했다.

가끔 ChatGPT와 같은 생성형 AI에게 리액트 코드를 물어보면, 클래스를 사용한 코드를 던져줄 때가 있어 괴리가 발생하곤 했는데, 이는 GPT가 구버전의 코드를 학습해서 그런 것이었다.