안녕하세요.

오늘은 최근에 주목받는 오픈 소스 기술 중에서도 페이스북에서 공개한 자바 스크립트 라이브러리인 리액트(React JS)에 대하여 소개해 드리려고 합니다. 그럼 자세한 내용 설명을 위해 아래로 Move! Move!  

This is 'React JS'

 자바 스크립트 프레임워크라고 하면 보통 일반적으로 떠올리는 앵귤러(Angular JS)가 있습니다. 하지만 리액트는 이와 같은 프레임워크가 아닌 사용자 인터페이스 라이브러리입니다. 

리액트는 페이스북 그리고 인스타그램의 개발자들이 만들어 2013년에 알려져서, 최근에는 페이스북과 인스타그램뿐만 아니라 에어비앤비나 야후 등 많은 곳에서 사용되고 있습니다. 

『여기서 잠깐,  라이브러리와 프레임워크의 차이』

여러가지 쉬운 설명들이 많이 있지만 프레임워크는 큰 틀이 다 갖추어져 있기 때문에 사용자는 일부의 필요한 부분만 조정하고 만들면 완성되고, 라이브러리는 연장이나 도구와 같아서 본인이 무언가를 직접 만들어 하나하나 완성하면 되는 것이죠.

예를 들어 라이브러리는 망치나, 삽과 같은 도구로 생각하면 쉽습니다. 직접 두들기고, 파고, 필요한 것을 얻기 위해 이러한 작업을 직접하여 시간은 좀 더 걸리지만 원하는 목표를 이룰 수 있는 것이구요. 프레임워크는 이미 만들어진 자동차나, 배 또는 비행기와 같은 탈것으로 생각하면 됩니다. 어떻게 만들어지는지 알 수 없고 그 자체에 대한 활용능력 없이도 이미 있는 교통수단을 통해 원하는 목적지, 목표에 도달 할 수 있는 것입니다.
 

리액트(React JS)의 특징

1. JUST the UI
2. Virtual DOM
3. DATA Flow

리액트의 가장 큰 특징은 MVC (Model View Controller) 패턴에서 컴포넌트를 통해 View를 표현하는 것만 집중하고 있다는 것입니다. 따라서 UI 개발자의 경우는 리액트를 사용했을 때 큰 메리트를 느낄 수 있는 것이죠. 

두 번째로 커스텀 태그라고 하는, 커스터마이징 된 나만의 태그를 만들 수 있고 그것으로 웹 개발이 가능한 방식을 지원한다는 사실입니다. 커스텀 태그가 좋은 이유는 기능을 모듈화하기 때문에 코드 이해를 하는 것이 간단하고 쉬워질 뿐만 아니라 개발자가 코드를 수정하거나 다시 사용하기 쉽기 때문이에요. 

그 밖에도 리액트는 가상 DOM 지원, 단방향 데이터 바인딩 기능을 제공합니다. 

리액트(React JS)와

다른 자바스크립트 프레임워크와의 차이점

대표적인 자바스크립트 프레임워크로는 앵귤러(Angular JS)가 있습니다. 앵귤러는 양방향 데이터 바인딩을 사용하기 때문에 단방향인 리액트와 차이를 갖지만 그렇다고 해서 리액트가 앵귤러보다 적은 코드 양을 사용한다는 것은 아니에요. 오히려 모델 컴포넌트에서 UI 컴포넌트로 전달하는 방향이 단방향이라 이해하기도 관리하기도 쉽다는 장점이 있어요. 

또 앵귤러나 앰버 등 여타의 자바스크립트 프레임워크는 검색엔진에서 찾지 못한다는, 바로 검색엔진 최적화의 문제가 있었습니다. 게다가 사용자가 페이지에 처음으로 접속할 때는 렌더링 하는 시간이 걸려서 느리게 느껴지는 단점이 있었기 때문에 페이스북이 리액트를 개발하게 된 것이죠.

리액트(React JS)의 운명

리액트는 프론트엔드단의 모든 프레임워크 (예를 들어 라우터나 모델과 같은)를 제공하지 않기 때문에 다른 프레임워크도 함께 써야 할 경우가 종종 발생합니다. 그러나 리액트의 특징에서 설명해 드렸던 듯 MVC 중에서 View에 집중하는 컴포넌트 라이브러리이기 때문에 어쩔 수 없는 부분이라고 말할 수 있겠네요. 

리액트(React JS)와 

리액트 네이티브(React Native)

리액트 네이티브라는 프레임워크를 들어보셨나요? 쉽게 말해 모바일 앱 개발을 위한 자바스크립트 프레임워크로 웹뷰(Webview)를 사용하지 않는다는 특징이 있습니다. 종종 다른 블로그의 글을 보면 안드로이드 앱 개발과 iOS 개발을 동시에 다 할 수 있다며 찬양하는 글을 볼 수 있지만 사실 80% 정도만 커버 가능하고 나머지는 각각 다르게 만들어 가야 합니다. 대신 웹에서 사용하던 리액트(React JS)를 모바일로 그대로 가져와서 쓸 수 있다는 장점이 있죠. 

프론트엔드 개발을 위한 선택

리액트는 빠른 변화에 맞추어 업데이트 주기 역시 빠릅니다. 웬만한 라이브러리나 앵귤러에 비해 속도 역시 굉장히 빠르고 컴포넌트의 모듈화는 일반적인 템플릿 엔진을 쓰는 것보다 훨씬 더 깔끔하게 정리할 수 있고요. 그러나 만약에 이미 기존에 쓰던 프레임워크가 있다면 지금부터 바꿔서 쓰실 필요는 없을 것 같습니다. 리액트가 지금보다 더 단점을 개선하고 보완해서 많은 기능들을 완성한 후에 써도 아직은 늦지 않으니까요. 

최근 앵귤러 2와 비교되며 무엇을 쓰는 게 더 편하고 좋은지에 대한 이야기가 많이 나오는데요. 사실 이것은 프론트엔드 개발자 개인의 선택 문제라고 말씀드릴 수 있을 것 같아요. 만약에 복잡하고 큰 UI 표현과 앞서 말씀드린 렌더링 속도에 포커스를 둔다면 당연히 리액트가 좋은 선택입니다. 

 ​​