왜 React를 써야할까?

React는 2013년 페이스북에서 오픈소스로 공개한 자바스크립트 라이브러리로, 페이스북에서 이용하고 있을 뿐 아니라 AirBnB, Uber, Netflix, Instagram 등 우리가 자주 사용하는 웹 어플리케이션 중 상당수는 리액트로 만들어졌습니다.

 

1. React is a JavaScript library for building user interfaces

공식사이트는 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 React를 소개합니다.

만약 많은 기능을 제공하지 않는 웹사이트거나 사용자와의 인터렉션이 별로 없는 웹사이트라면 HTML, CSS, Javascript로 충분히 그 기능을 제공할 수 있습니다. 그러나 프로젝트 규모가 커지고 다양한 유저 인터페이스와 인터렉션을 제공해야 한다면 HTML, CSS, Javascript만으로는 유지보수가 가능한 깔끔한 코드를 작성한다는 것은 사실상 불가능할 것입니다.

그래서 DOM관리와 상태관리, 상태업데이트 등 관리를 최소화하면서 기능개발에 집중할 수 있는 라이브러리와 프레임워크들이 만들어졌다고 합니다.

 

Framework? Library? 핵심은 제어 주도권

framework

• 뼈대, 기반구조라는 뜻으로, 객체 지향 개발을 하게 되면서 통합성, 일관성을 위한 방법으로 고안. 프레임워크 틀 안에 제어 흐름에 대한 주도성이 있기 때문에, 사용자는 그 안에서 필요하는 코드를 짜 넣는 형식
• 특징 : 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성,
  추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의,
  컴포넌트들은 재사용이 가능, 높은 수준에서 패턴들을 조작화 할 수 있음

Library

• 활용가능한 도구들의 집합으로, 이를 가져다 사용하고 호출하는 측에 전적으로 주도성이 있음
• 개발자는 웹(앱) 어플리케이션을 만들 때 전체적인 흐름을 만들며 라이브러리를 가져다 사용

 

2. 장점: Virtual DOM, Component, JSX

페이스북이 React를 만들기 전에도 이미 Angular, Backbone, Knockout, Ember 등 수많은 프레임워크들이 존재했습니다. 이 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보여지는 뷰(View), 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러(Controller)로 이뤄진 MVC패턴, 그리고 MVP, MVVM, MVI 등 패턴들로 이뤄져있었습니다.

 

모든 프레임워크들의 공통점은 Model이었는데, 즉 모델의 값이 변화하면 뷰에서도 이를 변화시켜주는 형식이었습니다. 특정 이벤트가 발생하면, 모델에 변화가 생기고 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떤 방식으로 뷰를 업데이트 해줄지가 핵심이었다고 합니다.

페이스북에서는 리액트를 만들기 전, "그냥 Mutation을 하지 말고 데이터가 바뀌면 기존 뷰를 날리고 새로 만들어 버리는 게 어떨까?"라는 생각으로 virtual DOM을 만들었다고 밝혔습니다.

 

Virtual DOM

• (https://www.youtube.com/watch?v=M-Aw4p0pWwg)
• virtual DOM은 가상DOM으로, 변화가 일어나면 실제 브러우저의 DOM에 새로운 것을 넣는 방식이 아니라 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음 정말 변화가 일어난 부분만을 업데이트 합니다.
• virtual DOM은 DOM 변화를 최소화 시켜주는 역할을 하는데, 이 횟수를 최소화 시키는 것이 성능적으로 매우 중요한 이슈가 됩니다.
• react에서는 오직 element가 변하거나 업데이트 될 때만 DOM이 업데이트되거나 렌더링되므로 빠르다는 장점을 가지고 있습니다.

Encapsulated Components

• isolated, independent, reusable
• Component 단위 개발은 react의 또 다른 특징입니다. 컴포넌트를 통해 UI 재사용이 가능한 여러 부품으로 나누고, 이를 부품으로 전체 프로젝트를 완성해 나갑니다. 개념적으로는 javascript 함수와 유사한데, 'props'(값)을 받은 후 화면에 어떻게 표시할지 정하는 react element를 반환합니다.

// fucntional Component
function Welcome(props) {
  return <h1> Hello! `${props.name}`</h1>;
}

// Class Component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 캡슐화된 컴포넌트의 장점은 코드의 재사용과 유지보수성이 높다는 것입니다. 개발하다 특정 부분에서 오류가 생기면 해당 컴포넌트만 수정할 수 있어 편리합니다.
• 만약 프로젝트 여기저기에서 사용되는 input box가 있다면 컴포넌트로 만들어두고 불러서 사용하면 됩니다. input box 컴포넌트만 수정하면 전체 페이지에서 이용되는 input box가 모두 수정되므로 보수가 편리합니다.
• 그리고 최근 Jest로 테스트 코드를 작성하면서 느꼈는데, 캡슐화되어 있는 컴포넌트는 기능과 로직을 테스트 하는 것도 어렵지 않았습니다. 유지보수성이 높다는 것을 실감했습니다.

JSX

• JSX는 javascript XML의 줄임말로 Javascript를 확장한 문법입니다. 이를 이용해서 react element를 만들 수 있습니다. 직관적이고 매우 쉽게 render 코드를 작성할 수 있고, 중간중간 필요한 로직을 넣을 수 있어 편리합니다.

출처 : https://www.geeksforgeeks.org/react-jsx-in-depth/

3. 왜 react를 쓸까?

• 높은 자유도, 풍부한 생태계, 좋은 Testability 환경 등등...

풍부한 생태계

React의 인기가 높아지면서 개발자들은 리액트를 활용한 다양한 라이브러리를 개발하고 배포하며 공유하고 있습니다.

 

npm 페이지에는 React를 활용한 라이브러리들이 넘쳐납니다!(다들 넘나 대단...)

또한 React를 사용하는 개발자 간 강력한 커뮤니티의 형성으로 문서화가 잘 되어 있습니다. 개발을 하면서 겪을 수 있는 문제점들은, 이미 다른 사람들이 커뮤니티 활동을 통해 해결해뒀을 가능성이 높아 잠깐만 검색해도 답을 얻을 수 있습니다.

리액트를 이용하면 웹 어플리케이션뿐만 아니라 리액트 네이티브로 모바일 어플리케이션, 일렉트론으로 데스크탑 어플리케이션도 만들 수 있는 장점이 있습니다.

단, 생태계가 풍부한 만큼 배워야 할 것들이 꽤나 많은 편이고, 상태 관리, 라우팅, 빌드 시스템 등을 모두 숙지해 만들어 나가야 한다는 어려움이 있긴 합니다.

 

높은 자유도

앞서 장점에서 언급한 것처럼 컴포넌트는 고립되어 있고 독립적이고 재사용이 가능합니다. 그렇기 때문에 유닛테스트가 가능해집니다.

 

Unit test?

• 유닛 테스트의 목적은 프로그램의 각 부분을 고립 시켜서 각각의 부분이 정확하게 동작하는지 확인하는 것이다.
• 즉, 프로그램을 작은 단위로 쪼개서 각 단위가 정확하게 동작하는지 검사하고 이를 통해 문제 발생 시 정확하게 어느 부분이 잘못되었는지를 재빨리 확인할 수 있게 해준다. 따라서 프로그램의 안정성이 높아진다.
• 유닛 테스트는 일견 개발 시간을 증가 시키는 것처럼 보이지만 개발 기간 중 대부분을 차지하는 디버깅 시간을 단축시킴으로써 여유로운 프로그래밍을 가능케 한다.

 

4. 정리하자면..

React는 프레임워크가 아닌 라이브러리이므로 자유도가 높은 만큼 프레임워크보다 손이 많이 갈 수 밖에 없을 것입니다. 물론 코드의 통합성, 일관성을 위해 더 많은 노력이 필요하겠으나 개발자가 제어 주도권을 가지고 원하는 방향으로 프로젝트를 수행할 수 있다는 장점도 있습니다.

 

자바스크립트 문법에 익숙하고, 타입스크립트를 이용할 거라면, 프로젝트의 규모가 크며 점차 확장될 예정이라면, 커스터마이징 및 자유도가 높은 개발 환경을 좋아하는 사람이라면 React가 아주 잘 맞을 거라고 합니다. 넓은 커뮤니티, 개발 인력시장에서의 높은 선호도 역시 React를 선택하게 하는 장점 중 하나가 아닐까 싶습니다.

 

참고 사이트
https://reactjs.org/
https://react.vlpt.us/
https://webclub.tistory.com/458
https://velopert.com/3236
https://seokjun.kim/time-to-stop-react/
https://www.sizplay.dev/react/2021-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%9D%ED%83%9C%EA%B3%84-%ED%98%84%ED%99%A9/