[React] React를 사용해야 하는 이유

1. FrontEnd Library와 Framework의 등장 이유

(1) 정적 웹페이지와 동적 웹페이지란 무엇인가

정적 웹 페이지는 웹 서버에 이미 저장되어 있는 HTML문서를 클라이언트에게 전달한 것이다. 단순한 정보 전달의 원리를 가지기에, 유저의 인터랙션은 중요하지 않다. 고로 HTML과 CSS만으로도 웹 페이지를 생성할 수 있다. 하지만 현재 사용자들이 요구하는 페이지는 동적 웹 페이지이다.

동적 웹 페이지는 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트에게 전달한 것이다. 이때 HTML 제작 방식을 SPA(Single Page Application)이라 한다.

 

(2) 라이브러리와 프레임워크의 필요성

프로젝트의 규모가 커지고, 다양한 유저 상호작용이 전달되면 DOM 요소들 역시 변화가 이루어져야 한다. DOM 요소들이 변화되면 랜더 트리 재생성의 과정을 거쳐야 하며, 유저 상호작용이 증가할수록 이 과정이 반복되어야 한다.

하지만 DOM 요소 변화 과정이 반복될수록, 브라우저의 연산 수가 증가해 프로세스가 비효율적으로 변하게 되며, 개발자가 관리해야 하는 변화의 양도 늘어나게 된다.

DOM 변화 관리를 최소화하고 개발자는 기능 개발에 집중할 수 있도록 프론트엔드 라이브러리와 프레임워크가 등장했으며, 분화되어 발전되었다.

 

2.React를 사용해야 하는 이유

리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이며, 다음과 같은 특징을 가진다.

 

(1) Virtual DOM 사용으로 DOM 상태 변화 최적화

Virtual DOM을 만들어 파일들을 비교하여, 실제 DOM을 변경하도록 설계되어 있다. 전체가 아닌 변화한 부분만을 다시 렌더링하기에 DOM 업데이트를 최적화했다.

이때 유의해야 할 점은 state의 불변성을 유지해야 한다는 것이다. state를 직접 변경하게 되면 리액트가 render() 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 이루어지지 않게 된다. setState() 호출을 통해 render() 함수를 호출할 수 있기에, 컴포넌트는 setState를 비교해 상태를 변화해야 한다. 

 

(2) 컴포넌트 단위 개발

특정 기능 및 화면을 구현할 때 화면 구성에 집중할 수 있게 한다. 하나의 페이지를 만들 때, 각자가 개발해야 하는 컴포넌트 파일을 만들어 개별화되어 작업할 수 있어 효율적인 코드 분리가 가능하다. 더불어 확장성, 재사용성의 이점을 가진다.

실제로 필자는 개발할 때, 다음과 같이 다양한 컴포넌트를 활용해 Home Page를 구성했다.

| Navbar.jsx
| Slider.jsx
| Card.jsx
| CardLong.jsx

이때, Navbar과 Slider은 다른 개발자가 작성했으며 Card와 CardLong을 필자가 작성했다. 이와 같이 하나의 페이지를 만드는 과정에 코드를 분리하여 작성할 수 있다. 충돌을 예방할 수 있다는 것은 엄청난 장점이다.

 

(3) 다른 프레임워크와 혼용 가능

리액트는 라이브러리이기에, 다른 프레임워크와 라이브러리를 함께 사용할 수 있다.

---

📂 참고 주소