그동안 React를 '현재 가장 인기 있는 라이브러리니까', '많이 사용하니까'라는 생각으로 당연하게 배우고 사용해왔던 것 같다. "React를 왜 사용하는가?"라는 질문을 스스로에게 던져보니 명확한 답을 하기 어렵다는 것을 깨달았다. 이제는 단순히 인기 있어서가 아닌, React의 본질을 이해하고 다시 한번 깊이 있게 살펴보며 왜 React를 사용하는지 정리해 보려 한다.
🧐 프레임워크? 라이브러리?
먼저 프레임워크와 라이브러리에 대해서 다시 되돌아보려고 한다.
프레임워크와 라이브러리는 모두 개발자가 웹 애플리케이션을 빠르고 효과적으로 개발할 수 있도록 도와주는 유용한 도구이다. 그러나 이 둘은 목적과 기능에서 차이가 있다.
Framework
프레임워크는 흔히 뼈대라 불리며, 애플리케이션을 개발할 때 필요한 기본적인 구조와 규칙들을 미리 정해놓은 프래그래밍 틀이다. 애플리케이션의 전반적인 구조와 흐름을 제공하며, 개발자는 프레임워크가 정의한 규칙과 구조 안에서 개발을 한다. 가령, 애플리케이션의 전체적인 구조와 구동되는 방법, 각각의 컴포넌트들이 어떤 식으로 상호 작용하는지 모두 정해져 있는 것이다. 그로 인하여 개발자는 프레임워크가 제시하는 방법을 잘 익히고 그대로 따라 하면 애플리케이션을 만들 수 있게 된다.
대표적으로 프론트엔드의 Angular(JavaScript), Vue.js, Next.js 그리고 백엔드의 Spring(Java), Django(Python), Node js(JavaScript)가 있다.
Library
라이브러리는 특정 기능을 수행하는 코드의 집합으로, 개발자가 필요에 따라 사용할 수 있는 코드 모음, 즉 도구이다.
코드에서 특정 기능을 필요로 할 때 라이브러리에서 해당 기능을 호출하여 사용할 수 있다. 통제권은 나에게 있으며, 필요에 따라 라이브러리의 기능을 선택적으로 사용한다.
대표적으로 프론트엔드에서 사용하는 jQuery, React(JavaScript)가 있다.
요약하자면, 프레임워크는 전체 애플리케이션의 흐름을 주도하며 개발자는 프레임워크의 규칙과 구조에 맞춰 개발을 수행하기에 제어 흐름이 프레임워크에 있는 반면, 라이브러리는 개발자의 코드가 주도적이며 필요한 기능을 선택하여 사용하기에 개발자에게 있다.
💡 React의 탄생
2011년 Facebook은 급격히 증가하는 기능과 트래픽으로 인해 심각한 유지 보수 문제에 직면하게 되었으며, 특히 실시간 업데이트가 빈번한 뉴스피드에서 UI 관리가 매우 복잡해진 것이다. 당시 Angular, Backbone, Ember 등 여러 프레임워크가 있었지만, 이들은 양방향 데이터 바인딩을 사용하여 복잡한 UI에서 성능 문제가 발생한 것이다. 이러한 문제를 해결하기 위해 Facebook은 새로운 접근 방식인 Virtual DOM과 단방향 데이터 흐름을 도입한 React를 개발하였다.
💡 React = Library
React는 Meta(구 Facebook)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위한 도구이다. 컴포넌트 기반의 아키텍처를 통해 UI를 작은 독립적인 조각들로 구성할 수 있으며, 이러한 컴포넌트들은 높은 재사용성을 가져 개발 생산성과 코드 유지 보수성을 크게 향상시킨다.
특히 React는 Virtual DOM이라는 혁신적인 기술을 도입하여 웹 애플리케이션의 성능을 최적화하였으며, 독립적인 라이브러리이기 때문에 다른 라이브러리나 프레임워크와 자유롭게 조합하여 사용할 수 있다. 또한 React Native를 통해 모바일 애플리케이션 개발까지 가능한 확장성을 제공한다.
🤓 React를 사용하는 이유는?
1. Virtual DOM
React는 실제 DOM을 직접 조작하는 대신 Virtual DOM을 사용한다. 웹 브라우저는 HTML 문서를 DOM(Document Object Model) 트리 구조로 변환하여 화면에 표시하는데, React는 이 DOM을 직접 조작하는 대신 Virtual DOM이라는 가상의 DOM을 사용한다. 데이터가 변경되면 먼저 Virtual DOM에 변경사항을 적용하고 이전 상태와 비교한 후, 실제로 변경이 필요한 부분만 실제 DOM에 업데이트한다. 이러한 방식으로 불필요한 DOM 조작을 줄여 애플리케이션의 성능을 최적화할 수 있다.
2. Component
React는 UI를 독립적인 컴포넌트 단위로 쪼개서 개발할 수 있게 해준다. 마치 레고 블록처럼 작은 컴포넌트들을 조합하여 복잡한 UI를 구축할 수 있다. 각 컴포넌트는 독립적으로 동작하므로 재사용이 쉽고, 코드의 유지 보수와 테스트가 용이해진다.
3. JSX
JSX는 JavaScript 내에서 HTML과 유사한 문법을 사용할 수 있게 해주는 React의 특별한 문법이다. 이를 통해 컴포넌트의 구조를 더 직관적으로 작성하고 이해할 수 있으며, JavaScript의 모든 기능을 활용하면서도 마크업을 자연스럽게 표현할 수 있다.
4. 단방향 데이터 흐름
React는 데이터가 한 방향으로만 흐르는 단방향 데이터 흐름으로, 부모 컴포넌트에서 자식 컴포넌트로만 데이터가 전달되어 데이터의 흐름을 예측하기 쉽고 디버깅이 용이하다. 이는 애플리케이션의 상태 관리를 단순화하고 버그 발생 가능성을 줄여준다.
5. React Native
React의 지식을 활용하여 React Native로 iOS와 Android 앱을 개발할 수 있다. 하나의 코드베이스로 두 플랫폼의 네이티브 앱을 만들 수 있어 개발 효율성이 크게 향상된다.
