[React] 'React'의 시작

화면 출력에 특화된 프론트엔드 프레임워크, 리액트

 

1. 기원

1) 누가

페이스북의 소프트웨어 엔지니어, Jordan Walke

2) 언제

- 2011년 페이스북의 뉴스피드에 첫 적용

- 2012년 인스타그램닷컴에 적용

- 2013년 5월 JSConf US에서 오픈 소스화

3) 어디서

페이스북 및 공동체

4) 왜

리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해당하는 DOM과 요소를 찾은 다음 사용자가 정의한 규칙(함수, 이벤트 등)을 적용한다. 만약 이런 인터랙션이 자주 발생하고, 동적인 UI가 요구되는 상황에서는 이런 규칙이 엄청 많아질 것이고, 개발자는 그런 규칙과 DOM을 일일이 관리하고 수정하는 과정에서 많은 시간을 소비하게 될 것이다. 대부분의 자바스크립트 프레임워크가 자바스크립트를 통해 어떤 값이 바뀔 때, DOM과 연결하고 업데이트하는 작업을 간소화해주는 기능을 한다. 하지만 리액트는 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라 아예 날려버리고 새로운 것으로 만들어서 보여주려는 아이디어에서 시작됐다. 하지만 용량이 많은 애플리케이션에서 계속해서 없애고, 새로 만드는 과정을 반복한다면 속도가 굉장히 느릴 것이다. 리액트는 이를 Virtual DOM(가상 돔)이라는 기술을 적용함으로써 가능하게 했다.

- 기존 자바스크립트 원리와 리액트 발상: https://react.vlpt.us/basic/01-concept.html

- 가상 돔과 돔의 차이: https://github.com/FEDevelopers/tech.description/wiki/%EA%B0%80%EC%83%81-%EB%8F%94%EA%B3%BC-%EB%8F%94%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

2. 활용

우선, 현재 가장 주목 받는 프레임워크는 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등을 꼽을 수 있다. 앵귤러는 화면 출력, 형상 관리부터 배포까지 많은 기능을 포함한 완성형 프레임워크를 지향하고, 뷰제이에스는 가장 나중에 나오면서 다른 프레임워크의 장점을 흡수, 단점을 보완한 프레임워크이다. 하지만 현재 가장 많이 활용되는 프레임워크는 단연 리액트이다. 이는 아래 출처를 통해 다운로드 수 그래프와 개발자 수요를 확인하면 알 수 있다.

- 프레임워크 다운로드 현황: https://www.npmtrends.com/@angular/core-vs-angular-vs-react-vs-vue

- 프레임워크 개발자 수요: https://bit.ly/2Rmx1Zn 

이렇게 리액트가 많이 활용되는 이유는 그만큼 장점을 갖고 있기 때문이라고 생각한다. 내가 파악한 리액트의 장점은 아래와 같다.

1) 컴포넌트(Component)라는 요소로써 화면 UI를 구성한다. 그리고 이 컴포넌트는 기존 웹의 구성 요소(HTML, CSS, JavaScript)를 각각 작성해야 하는 것이 아니라, 컴포넌트 파일 하나에 JSX(JavaScript XML) 문법으로 한 번에 작성될 수 있다는 점이 생산성과 유지 보수에서 용이하다고 판단된다.

2) 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 모두 지원한다. 특히, 클라이언트 사이드 렌더링을 통해 앱 애플리케이션 같은 일정한 양식의 페이지에서 특정 항목만 자연스럽고 부드럽게 전환이 가능하도록 하기 때문에 웹 페이지 전체 리렌더링(새로고침)이 필요 없고, 더 좋은 UI/UX 제공이 가능하다.

3) 가상 돔 기술을 도입하고, 화면 출력 속도를 빠르게 한다. 기존 자바스크립트에서는 제이쿼리(jQuery)와 핸들바(handlebars)라는 라이브러리를 통해 화면을 구성했는데, 화면이 커질수록 화면을 그리는 시간이 길어지고 화면의 일부분만 수정되어도 전체를 다시 그려야 하는 단점이 있었다. 하지만 페이스북에서는 다음에 나타날 화면의 일부를 미리 그려 놓고, 변경된 화면의 일부만 수정하는 방식인 '가상 돔' 기술을 적용함으로써 화면 출력 속도를 향상시켰다.

- 서버 사이드 렌더링과 클라이언트 사이드 렌더링 추가 설명: https://oneroomtable.tistory.com/entry/서버-사이드-렌더링과-클라이언트-사이드-렌더링이란-무엇인가요

=> 이런 장점과 요소를 통해 리액트는 많은 인기를 얻고, 많은 곳에서 활용되고 있다. 개인적으로도 이런 리액트를 잘 습득하면 많은 부분에서 유용하게 활용할 수 있을 것이라 판단되어 공부하고 있다.