왜 프론트앤드 라이브러리/프레임워크를 쓰고 React는 무엇인가

출처: https://velog.io/@gusdh2/React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EB%AD%98%EA%B9%8C

참고: https://www.youtube.com/watch?v=V3QsSrldHqI&t=333s

리엑트를 사용하는 이유중 하나가 싱글페이지(single page application)를 구현하기 위해서임.

리엑트는 복잡한 웹앱에서의 데이터와 화면의 불일치 문제를 해결해 준다. 따라서 전통적인 웹페이지(예를들면 어떤 정적인 문서를 보여주는 웹페이지)들에 굳이 리엑트를 사용할 필요는 없습니다. 이것이 아직 JQuery같은 프레임워크가 많이 쓰이는 이유입니다. 굳이 모든 웹사이트를 SPA(sSingle Page Application)로 만들 이유가 없는것이 이 때문입니다. 

 

처음 프론트앤드 공부를 시작하게 되었고, 자바스크립트를 배우면서 자연스럽게 리액트를 사용하게 되었습니다. 왜 사용하게 됐는지에 대한 질문을 받는다면 '매우 인기 있는 라이브러리', '많은 기업에서 요구하는 스펙'이라는 솔직한 답변은 만족스럽지 않은 답변이였습니다. 그래서 어떠한 이유로 프론트앤드에서 겪고 있는 고충을 해결하기 위해 리액트를 만든 것인지 알아볼 필요가 있다고 생각했습니다.

그래서, 이번 글에서는 리액트는 어떤 문제를 해결하고자 나왔고, 리액트의 철학과 추구하는 방향, 그리고 많은 개발자분들이 느끼고 있는 리액트의 공통적인 장점과 특징을 간접적으로 정리해보고자 합니다.

🧐 먼저 왜 프론트앤드 라이브러리 프레임워크가 나왔을까?

프론트앤드 라이브러리가 등장하게 된 이유는 동적인 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함입니다. 여기서 정적, 동적인 웹 페이지가 무엇인지 궁금해집니다.

정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터랙션은 중요하지 않은 요소로 볼 수 있습니다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있습니다.

반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다. 즉, 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 됩니다.

동적인 페이지가 주를 이루는 요즘, 웹 페이지라기 보다, 웹 애플리케이션이라는 용어가 더 어울릴 정도로 유저 인터랙션을 처리하기 위한 상태 변화가 상당히 많아졌습니다. 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 프론트앤드 라이브러리 / 프레임워크가 등장하게 된 것입니다.

🧐 그래서 무엇이 달라졌는가?

웹 애플리케이션이라 불릴 만큼, 프로젝트 규모가 커지고, 다양한 유저 인터랙션이 전달된다면 그만큼 DOM 요소들 또한 변화가 이루어져야 한다는 것과 같습니다. DOM 요소들이 변화한다는 것은 랜더 트리 재생성, 요소의 스타일 계산, 레이아웃 구성, 패인팅 하는 과정을 거쳐야 한다는 것과 같습니다. 결국, 유저 인터랙션이 전달되는 만큼, 이와 같은 과정이 반복되어야 한다는 것이죠.

하지만, 이러한 과정이 반복되면 될수록 브라우저가 많은 연산을 해야 한다는 것이고, 이는 전체적인 프로세스의 비효율성을 야기합니다. 또한, 많은 DOM 요소의 변화를 개발자가 직접 관리하는 것은 적지 않은 짐으로 다가오게 될 것입니다.

결국, 프론트앤드 라이브러리 / 프레임워크는 DOM 관리와 상태 변화 관리를 최소화하고, 개발자는 오직 기능 개발, 사용자 인터페이스에 보다 더 집중할 수 있도록 도와주는 것이며 이러한 목적을 가지고 다양한 해결 방식, 추구 방향을 가지고 각각의 프론트앤트 라이브러리 / 프레임워크가 탄생하게 되었습니다.

🤔 왜 React(리엑트)인거지?

각각의 프론트앤트 라이브러리 / 프레임워크들은 추구하는 방향과 특징들이 다릅니다. (이 글에서는 리액트를 중심으로 다루기 때문에 타 프론트앤트 라이브러리 / 프레임워크들의 특징은 이 글로 대체하겠습니다.)

그렇다면, 우리가 사용할 리액트의 특징은 무엇이 있을까요?

1. 가상 돔의 사용으로 DOM 업데이트 최적화
   리액트는 개발자들이 DOM 업데이트를 위해서 하는 최적화 행위를 가상 돔을 만들어 비교하고 DOM을 추상화 하여 필요한 부분만 다시 그리는 방식으로 개발자들이 DOM 업데이트를 오용하는 일을 피했습니다.
2. 컴포넌트 기반
   컴포넌트 기반인 리액트는 특정 기능을 구현하거나 특정 화면을 구현할 때 그 화면을 구성하는 일에만 집중할 수 있게 해 줍니다. 여러 명의 프론트엔드 개발자가 하나의 페이지를 만든다고 해도 서로 다른 파일을 작업하도록 구성할 수 있기 때문에 효율적인 코드 분리가 가능합니다.
3. 생태계 및 수 많은 커뮤니티와 지속적인 개발
   리액트의 생태계는 여타 다른 라이브러리, 프레임워크 커뮤니티보다 활발합니다. 단순 View 만을 관리하는 리액트가 프레임워크처럼 사람들이 사용할 수 있을 정도입니다. 페이스북이 만들었고 주도하고 있으며, Airbnb, netflix같은 기업들이 리액트를 사용 중에 있습니다.
4. React Native의 앱 개발 기능
   React Native는 모바일 앱을 만들기 위한 프레임워크로 React를 기반으로 만들어졌습니다. 그래서 React로 기존에 개발을 하는 웹 개발자라면 React Native를 금방 배울 수 있고 쉽게 모바일 앱을 만들 수 있습니다.

👨‍💻 마무리

즉, 리액트(React)를 사용하며 아래와 같은 이점을 얻을 수 있습니다.

1. 컴포넌트 단위로 구성하여 조합, 분해하기 쉽다.
2. 로직과 뷰를 분리하여 구분하기 쉽다.
3. 가상 DOM을 활용하기 때문에 화면이 자주 바뀌는 경우 렌더링 자원을 아낄 수 있다.
4. 상태 관리와 이에 따른 뷰의 변화를 제어하기 쉽다.

이러한 경험을 통해 리액트가 왜 생겼는지, 리액트를 왜 사용하는지 다시 한번 진지하게 되돌아볼 수 있었습니다.