http://www.bloter.net/archives/233564
페이스북은 최근 오픈소스 기술 공개에 열을 올리고 있다. 2014년 공개한 오픈소스 기술만 해도 100개가 넘는다. 수많은 오픈소스 중에 올해 유난히 집중을 받는 기술이 있다. ‘리액트’ 그리고 ‘리액트 네이티브’다. 이 두 기술은 앵귤라JS나 하이브리드 앱 개발 같은 주제와 연관돼 자주 회자된다. 한국에서 리액트를 공부하고 있는 2명의 개발자에게 리액트 사용 후기를 들어보았다.
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리다. 페이스북과 인스타그램 소속 개발자들이 만들고 있으며, 2013년 처음 공개됐다. 리액트의 특징은 ‘MVC(Model View Controller)’ 패턴에서 ‘V(View)’에만 집중하고 있는 점이다. 여기서 말하는 V란 데이터를 화면에 표현하는 계층이다.
▲사진 : 김태곤 개발자 발표 자료
뷰와 관련된 UI만 구현하고픈 개발자가 있다면, 리액트의 장점을 크게 느낄 수 있다. 리액트는 커스텀 태그를 지원하고 있다. 커스텀 태그란 <h1>,<select>처럼 미리 지정된 태그 외에 나만의 태그를 만들어 웹을 개발하는 방식이다. 커스텀 태그로 웹을 개발하는 방식은 최근 주목받는 웹 개발 트렌드 중 하나다.
▲커스텀 태그 속 내용은 html이나 자바스크립트 소스코드 등이 들어가며 커스텀 컴포넌트로 활용할 수도 있다.(사진 : 김태곤 개발자 블로그)
개발자는 ‘React.createClass’같은 문법을 활용해 리액트 안에서 커스텀 태그를 만들 수 있다. 커스텀 태그는 각 기능을 모듈화하고 향후 전체 코드를 쉽게 이해할 수 있게 돕고, 개발자는 소스코드 수정과 재활용도 더 편히 할 수 있다. 가령 <덧글앱>이라는 태그를 만들고, 그 안에 <덧글 목록>을 만들고, <덧글 목록>안에 다시 <덧글 내용>을 정의한다. 개발자는 나중에 미리 정의된 <덧글 내용> 기능을 재활용할 수 있다. 태그로 정의된 하나의 기능 혹은 재활용할 수 있는 요소를 컴포넌트라고 부른다. 이 외에도 리액트는 가상 DOM을 지원하고 단방향 데이터 바인딩 기능 등을 제공해 주목을 받고 있다.
▲컴포넌트의 예(사진 : 김태곤 개발자 발표 자료)
리액트가 좀 더 부상하게 된 계기는 올해 발표된 ‘리액트 네이티브’ 덕분이었다. 리액트 네이티브는 네이티브 모바일 앱을 만들기 위한 프레임워크다. 리액트 네이티브는 리액트를 기반으로 개발됐다. 리액트가 웹 개발자 혹은 하이브리드 앱 개발자에게 관심을 끌 수 있는 기술이라면, 리액트 네이티브는 모바일 개발자들이 주목할 만한 기술이다. 2015년 1월 리액트 컨퍼런스에서 발표됐다. 현재는 iOS용 리액트 네이티브만 나온 상태다.
대다수 모바일 앱은 하이브리드 앱이 아닌 네이티브 앱 형식으로 개발된다. 일반적으로 하이브리드 앱, 다시말해 안드로이드와 iOS에서 동시에 작동하는 소스코드를 작성하려면 ‘웹뷰’를 이용해야 했다. 웹뷰를 이용한 하이브리드 앱 기술은 기존 네티이브 앱에서 지원하는 속성을 이용하지 못했다. 여기서 리액트 네이티브만의 차이점이 나온다. 리액트 네이티브를 이용하면<TabBarIOS>같은 애플이 지원하는 네이티브 속성에 그대로 이용할 수 있다.
▲리액트 네이티브가 iOS 개발 속성에 바로 접근한 예(사진 : 리액트 네이티브 깃허브)
또한 자바스크립트는 컴파일 된 자바, 오브젝티브C에 비해 느린 언어다. 자바스크립트로 앱을 만들어도 언어의 한계 때문에 병목 현상이 일어난다. 리액트 네이티브는 자바스크립트 코드와 네이티브 코드를 별도 스레드로 분리한 뒤 둘 사이의 통신을 비동기식으로 만든다. 이 때문에 네이티브가 자바스크립트 때문에 느려지는 현상이 없어진다. 기존 하이브리드 앱보다 좋은 성능 덕에 리액트 네이티브는 더 주목받았다.
모바일 앱을 주로 개발하는 김용욱 필링선데이 및 레이지비 CTO는 “커스텀 태그를 만들 때 주로 앵귤러JS를 이용했다”라며 “이때 디렉티브를 만들고 컨트롤러에 연결할 서비스를 만들어야 해서 조금 불편했다”라고 설명했다. 또한 그는 “개인적으로 나는 여러 도구를 활용하는 개발자다”라며 “앵귤라JS는 배워야 하는 내용이 많았는데, 리액트는 학습할 분량도 상대적으로 적고 직관적이라 관심이 생겼다”라고 설명했다.
김용욱 개발자는 리액트의 첫 번째 장점으로 ‘쉬운 사용법’을 꼽았다. 그는 “자바스트립트 입문자라도 리액트 네이티브로 쉽게 앱을 개발할 수 있을 것”이라고 설명했다. 그렇다면 좀 더 근본적인 질문이 생긴다. 개발자는 평소 하던 대로 오브젝티브C로 네이티브 앱을 만들어도 되지 않을까. 리액트 네이티브로 하이브리드 UI를 만들면 어떤 점이 더 좋은 것일까?
“네이티브 모바일 플랫폼의 UI는 여러 단점을 가지고 있습니다. 예를 들어 안드로이드는 아주 세부적인 디자인을 고치기 힘든 편입니다. 가령 안드로이드 앱의 A 요소에서 1픽셀만 옮기는 건 힘들어요. iOS의 경우 레이아웃 시스템이 아직 성숙하지 않아요. iOS는 레이아웃 문제가 발생하면 제약을 추가하는 식으로 문제를 해결하는데요. 하나의 제약을 추가하면 다른 부분에서 적용되지 않을 수도 있고요. 결과적으로 직관적이지 않죠. 게다가 스크롤이 필요한 요소가 있다면 쓰기 어려워요. 그래서 일반적으로 개발자는 단말 종류별로 UI를 따로 만들거나 런타임에 여러 수치 계산을 하면서 UI를 조정했어요. 리액트의 독자적인 체계를 활용하면 기존보다 좀 더 편히 UI를 조절할 수 있을 거예요. 물론 리액트 안드로이드 버전은 아직 공개되지 않아서 좀 더 지켜봐야하겠지만요. 뿐만 아니라 아이폰과 안드로이드 앱를 동시에 만들고, 코드를 양쪽에 모두 재사용할 수 있죠.”
▲사진 : 리액트 컨퍼런스 발표자료
팬시라는 스타트업에 속해 있는 김태곤 프론트엔드 개발자는 “주 사용 언어가 자바스크립트이다보니 웹 환경 기술에 관심이 많았다”라며 “페이스북이 자사의 웹과 앱에 리액트를 이미 적용했다고 하니 쉽게 없어지지 않을 것 같아 먼저 공부해봤다”라고 말했다. 김태곤 개발자는 리액트의 장점으로 ‘빠른 속도’과 ‘단순한 데이터 흐름’을 꼽았다.
“리액트는 메모리 상에 DOM을 구성하고, 가상 DOM으로 변경된 부분만 업데이트해 속도를 향상시킵니다. 개발자가 사용자 인터페이스를 개발할 때 자주 부딪치는 문제가 성능과 테스트입니다. 가상 DOM 기술을 사용하면 비록 완벽하지는 않겠지만 이 두 가지 문제를 더 쉽게 해결할 수 있습니다. 또 리액트에서 데이터는 한쪽 방향으로만 흐르고 변하는 시점이 명시적입니다. 데이터가 언제 어떻게 바뀌는지 고민할 필요가 없습니다. 데이터가 변경되면 사용자 인터페이스에 자동으로 반영되는 것은 당연하고요.”
▲사진: 김태곤 개발자 발표 자료
현재 리액트 최신 버전은 0.13.0, 리액트 네이티브의 최신 버전은 0.8(프리릴리즈 버전)이다. 리액트 네이티브는 iOS용만 공개된 상태다. 아무래도 처음 나온 기술이다 보니 리액트의 안정성이 어느 수준까지 도달했는지 궁금할 수 있다. 이에 대해 김태곤 개발자는 “리액트는 현재 실무에 바로 활용할 수 있는 기술”이라고 설명했다.
“에어비앤비는 리액트를 도입할 때 메인 화면의 검색 위젯에만 적용했습니다. 리액트에 관심이 있어하는 기업이라면 에어비앤비처럼 작은 단위로 리액트를 시작하면 좋지 않을까 싶습니다. 웹 응용프로그램이나 관리자 도구 등 다양한 사용자 인터페이스를 사용하는 환경에도 리액트가 적합합니다. 다시말해 버튼, 체크박스는 물론이고 그 외에 따로 정의해서 사용하는 게 많은 환경에 좋습니다. 리액트 네이티브의 경우, 자바스크립트를 사용해서 어느 정도 성능이 보장되는 네이티브 모바일 앱을 작성하고 싶은 분들에게 제안하고 싶습니다.”
리액트는 업데이트 주기가 빠르고 변화도 빠르게 흡수하고 있다. 최근에 다양한 웹 언어를 호환가능케 하는 바벨과 최신 자바스크립트 ES6(ECMAScript6)를 지원하고 있다. 이러한 잦은 업데이트는 가끔 단점으로 지적되기도 한다. 김용욱 개발자는 “리액트는 뷰 단위만 처리하는 도구이고, 결국에 다른 도구들을 같이 엮어서 써야 한다”라며 “처음 익혀야 하는 개념의 수는 적지만, 리액트답게 무엇인가 만들기 위해선 플럭스, 웹팩, 바벨, ES6, 리액트 핫모듈 로딩 등 익힐 것이 많다”라고 설명했다.
김용욱 개발자가 추천하는, 리액트와 함께 공부하면 좋은 기술
보통 리액트, 플럭스, 웹팩으로 묶어서 알면 유용합니다.
플럭스는 데이터 흐름과 액션을 처리해주는 도구입니다. 앵귤러JS는 내장된 MVW(Model-View-Whatever) 플랫폼에 의해 개발하면 되지만 리액트는 뷰 수준만 제공하고 있습니다. 따라서 데이터 흐름과 액션을 처리해줄 별도의 도구가 필요합니다. 그 중 가장 널리 쓰이고 있는 도구는 플럭스입니다. 한글화된 문서도 있습니다.
웹팩은 모듈 번들러입니다. 노드JS는 모듈 개념이 있지만 웹브라우저의 자바스크립트는 모듈 개념이 없습니다. 웹팩은 클라이언트 자바스크립트를 모듈 단위로 개발할 수 있게 해줍니다. 개발자는 앱을 모듈 단위로 개발하고 웹팩을 통해 그것을 패키징할 수 있습니다.
웹팩의 또 다른 특징은 여러 플러그인을 붙일 수 있다는 점입니다. 대표적으로 자바스크립트의 최신 포맷인 ES6으로 작성된 코드를 기존 웹브라우저에서 수행할 수 있게 하는 바벨 플러그인이 있습니다. 또 수정된 코드가 웹브라우저에서 리프레시 없이 갱신되도록 하는 리액트 핫 로더 등이 최근에 유행하는 플러그인입니다.
김태곤 개발자는 “간단한 앱이긴 하지만, 나는 초기 지식 없이 하루 평균 3시간씩 일주일간 보고 리액트 앱을 만들었다”라며 “모바일 앱 개발을 염두에 두고 있더라도 웹 환경에서 간단하게 리액트를 활용해보는 것도 추천한다”라고 말했다.
※리액트를 공부할 때 참고할 만한 자료
- 리액트 공식 자료
- 리액트 영상 자료
- 리액트 한국 커뮤니티
- 리액트 관련 국내 블로그
- Spinbox로 React 겉핥기 by 개발왕 김코딩
- REACTJS 둘러보기 – XHP부터 REACT NATIVE까지 by 김태곤
- React Native를 사용한 초간단 커뮤니티 앱 제작 by 김태곤
- 서버와 클라이어트에서 동시에 사용하는 ReactJS by 김태곤
- 리액트 관련 참고 소스코드
- 리액트 관련 유료 강의
- 리액트와 함께 활용할 수 있는 기술
