React란?

A JavaScript library for building user interfaces

React는 사용자 인터페이스를 만드는 데 사용하는 자바스크립트 라이브러리로, 지속적으로 데이터가 변화하는 애플리케이션을 만들 때 큰 도움을 준다.

React를 쓰는 이유

리액트는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 개발자는 뷰만 신경쓰면 된다. 그럼 리액트가 알아서 데이터가 변화됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링해준다.

리액트는 Virtual DOM을 통해 효율적인 렌더링을 수행하고, 컴포넌트를 사용하여 높은 재사용성과 유지보수성을 제공한다.

• Component : 특정 부분이 어떻게 생길지 정하는 선언체이다.
• JSX : 리액트에서 사용하는 자바스크립트 문법으로 HTML 코드와 비슷하다.

• Virtual DOM
  실제 DOM을 업데이트 하기 전에 사용하는 DOM의 사본이라고 볼 수 있다. 리액트에서 데이터가 변하면 세 가지 과정을 거치면서 DOM을 업데이트한다.

  1. 전체 UI를 Virtual DOM에 리렌더링
  2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
  3. 바뀐 부분만 실제 DOM에 적용

Angular, Vue와의 비교

프론트엔드 라이브러리/프레임워크 3대장으로는 React, Angular, Vue가 있다.

라이브러리와 프레임워크

일단 React와 달리 Angular와 Vue는 프레임워크이다. 즉, 더 많은 것들이 내장되어 있고, 더 많은 기능을 자체적으로 지원해준다.

단방향 데이터 바인딩과 양방향 데이터 바인딩

Angular와 Vue는 양방향, 단방향 데이터 바인딩이 모두 가능하고, React는 단방향 데이터 바인딩을 한다.

Virtual DOM

Angular는 Virtual DOM을 쓰지 않지만 Vue는 React처럼 Virtual DOM을 사용한다.

Svelte란?

Svelte는 3대장에 이어 새로 뜨고 있는 프론트엔드 기술이다.

라이브러리나 프레임워크가 아닌 컴파일러

리액트와 같은 라이브러리는 production 배포 시 리액트와 라이브러리 자체가 같이 배포되어 실행 시점에 우리 앱의 코드들을 해석한다. 그러나 스벨트는 실행 시점이 아닌 빌드 시점에 모든 코드들을 single vanilla JS 번들로 컴파일한다.

기존 리액트 같은 라이브러리 방식은 프로젝트를 컴파일하기 위해 Webpack과 Babel 등을 호출하여 프로젝트 파일들을 번들하고, react와 react-dom 같은 라이브러리 또한 번들에 포함했다. 반면, 스벨트는 컴파일러이기 때문에 자체적으로 컴포넌트를 컴파일한다.

즉, 스벨트로 앱을 만든 후 빌드하면 단 하나의 JS 파일이 생성되어 이 파일 하나만 배포하면 되고, svelte 라이브러리는 배포할 필요가 없다. 그렇기 때문에 스벨트로 만든 결과물들은 대개 앱 running이 매우 빠르다.

NO Virtual DOM

리액트는 Virtual DOM을 사용한다. 리액트에서 render() 메서드를 이용해 component를 만들면, Virtual DOM 객체가 만들어진다. 앱의 상태가 업데이트되는 매 순간마다 새로운 Virtual DOM 객체가 만들어진다. 리액트는 실제 DOM과 가상 DOM을 비교해서 진짜 필요한 변화만 실제 DOM에 적용하는 일을 한다. 이렇게 해서 Virtual DOM은 충분히 빠르다.

그러나 매번 새로운 Virtual DOM을 생성하고, Virtual DOM을 이전 Snapshot과 비교(Diffing)하고, 최종적으로 실제 DOM에 업데이트하는 과정은 많은 오버헤드를 일으키는 것도 사실이다. 이런 과정 없이 실제 DOM에서 바뀐 부분만 업데이트한다면 훨씬 빠를 것이다. 그리고 Svelte는 이것을 해낸다.

왜 React인가?

Angular, Vue, Svelte 등 다른 대안이 있음에도 왜 React인가에 대해 말해보려 한다.

1. 커뮤니티가 거대하다.
   초보자 입장에서는 모르는 것이 너무 많아 물어볼 곳이 있어야 한다. 그럴 때 커뮤니티가 거대하다는 것은 굉장한 이점이다.
2. 취업 시장에서 가장 인기가 많다.
   취준생 입장으로서는 많은 기업에서 요구하는 것을 해야 기회가 많아진다. 사실 이것이 가장 큰 이유이다.
3. 페이스북이 지원한다.
   거대 기업인 페이스북이 지원하고 있으므로, 계속해서 발전할 것임을 기대할 수 있다.
4. 앱 개발 또한 가능하다.
   아직 React Native(RN) 공부를 한 적은 없어서 잘 모르나 React를 알고 나면 RN도 익히기 쉬울 것이고, 그렇다면 앱 개발 도전도 가능할 것이다.

계속 React인가?

이제 React.js를 버릴 때가 왔다

검색을 하다 강렬한 제목에 끌려 글을 읽어 봤는데 개발, 리액트 왕초보인 나도 공감 가는 내용들이 꽤 있었다. 제일 공감 갔던 건 hooks.. 물론 난 객체지향 프로그래밍, class에 대해 아예 몰라서 리액트를 처음 배울 때 함수형 컴포넌트로 대세가 바뀌었다는 것에 좋았지만.. 그것이 오히려 지금까지 내가 자바스크립트의 OOP 공부를 미루는 원인이 된 것이 아닌가 생각도 한다. 특히 useEffect를 쓰며 오류를 마주할 때는..😮‍💨 오히려 클래스형 컴포넌트를 쓰고 싶다는 생각도 했다.

빠르게 변화하는 프론트엔드 세상에서 리액트가 과연 얼마나 대세로 자리하고 있을지에 대해서도 생각해봤다. 물론 난 아직도 리액트밖에 모르고, 리액트도 기초밖에 모르니까 리액트가 영영 대세였으면 하지만.. 언제까지고 리액트만 붙잡고 있을 수도 없는 노릇이니..
리액트가 왕위 자리에서 내려오기 전에 얼른 새로운 기술을 빠르게 습득할 수 있도록 내 실력을 업그레이드해야겠다는 생각을 했다.

Remix란?

Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

react-router 개발자가 개발한 웹 프레임워크이다.
react-router가 v6를 내며 많은 것을 바꾼 이유가 바로 이 remix에서 활용하기 위함이라는 말이 있다.

-추가 예정-

추가 학습

• React의 생명 주기(Life Cycle)
• 단방향 데이터 바인딩과 양방향 데이터 바인딩

참고

• [책] 리액트를 다루는 기술 (1_리액트 시작)
• 누구든지 하는 리액트 1편: 리액트는 무엇인가
• [React] 내가 React를 선택한 이유
• [Svelte] 스벨트란 무엇인가? Reactive App 개발을 위한 새로운 접근법