리액트에 대한 생각 (vs AngularJS)

내가 리액트를 쓰려는 이유는 단순하다.

벡엔드 개발자이면서 또 직장인으로서 SPA기반의 개발을 편하다고 생각하지만, 다른 한편으로 데이터 엔지니어 관점으로 봤을 때 시멘틱하지 못한 웹은 끔찍하다고 생각한다.

(SPA: Single Page Application, 서버 의존도가 낮은 (웹) 어플리케이션을 뜻 한다. 여기서 의존도란 (웹) 어플리케이션의 큰 뼈대를 이루는 모든 Function을 서버에서 처리하는 것이 아니라, 일부의 기능(거의 대부분 화면 컨트롤, 데이터 동기) 를 서버에 의존하지 않고 분활 한다, 는다는 의미이다.)

실제로 프록시를 통해 SPA로 구현된 웹앱의 패킷을 열어보면, 껍데기만 오고 데이터는 텅 빈 것을 볼 수 있는데, 이걸 어떻게 처리해야하는가 하는 생각이 먼저 나온다.

이를 다른 사례를 들며 말을 해보면, 블로그에 수익을 위해서 광고를 달았다고 보자.

구글을 예시로 광고Code를 블로그에 삽입해서 웹봇이 탐색할 수 있는 표식을 다는 게 가장 첫번째 돈을 벌기 위한 미션이다. 그 다음 스텝으론 양질의 글을 쓰면서 웹봇이 이것저것 잘 긁어가라고 비는 수 밖에 없다.

그런데 만약 대세를 따라서 화면처리를 모두 엔드포인트에(User) 맡긴 블로그라면 돈을 못벌게 될 상황이 높다. 웹봇 입장에서 크롤링 하고자 블로그에 방문했을 떄엔 렌더링 되지 않은 빈껍데기의 데이터만 보여질 테니깐 말이다. (이러한 문제를 "SEO' 라고 부른다, 다른 말로는 "Cloaking 이슈"라고 부르기도 한다. )

이런 문제 외에도 SPA기반의 개발은 웹앱이 갖는 플랫폼의 다향성에도 어긋나는 경우가 많은 위험 요소가 있을 수 있기 때문이 있어서, (클라이언트 플랫폼에 따른 성능향상 혹은 성능하락, 작동하지않음(low version의 웹브라우저 등) 등의 동일성 이슈) 일을 하면서도 가끔 쓸모 없는 고뇌와 생각에 잠기고는 한다.

그렇다고 SPA 기반으로 하는 개발을 꺼려하거나 이건 잘못됬다 하는 이야기는 절대 아니다, 오해하지 말자. (뭔가 자꾸 SPA,SPA 하니 욕하는 기분이 드는 것은 착각이다)

지금도 SPA기반으로 개발을 많이하고 있고, 비동기로 처리되는 인터렉티브 웹 환경은 굉장히 매력적적적인 것이 사실이고 나역시 좋아하는 바이다. 내가 처음으로 SPA기반을 맛보았던 구글의 키워드추천 검색만을 놓고 생각해봐도 (영어를 모르는 나에게 검색의 앞 키워드만 입력해도 내가 원하는 단어를 스펠링을 모르더라도 기입해서 검색을 할 수있었다.) 이 때 받은 컬쳐쇼크는 아직도 잊혀지질 않는다.

만약 이 기능이 인터렉티브하게 실시간으로 이루어지지 않고 계속적으로 동기화 작업이 이루어진다면 (새로고침) 눈아프고 신경질나서 좋은 기능도 부정적으로 보였을 것이다.

그러니깐 어디까지나 클라이언트에서 부담이 가는 형태 외의 폴링과 같은 단순한 데이터 비동기와 같은 SPA형태를 좋아한다.

그리고 사실 리액트도 SPA형태의 웹앱을 짠다.

다만 리액트는 서버사이드 렌더링을 가장 우선으로 고려했었기에 나에게 있어서 괜찮아 보이는 자바스크립트 라이브러리였고, 관심을 가지게 된 계기가 될 수 밖에 없엇다.

개발 모토 자체도 View만을 위한 라이브러리 라고 하고, 풀 프레임워크인 Angular에 비해서 가볍고 성능적인 부분도 차이인 점이 더욱 성격에 맞았다. (예를 들면 Angular는 페이지에 재요청이 일어날 때, 다시 페이지를 렌더링한다 .. 뒤로가기나 새로고침 등.. . 애초에 리액트는 데이터 처리 성능을 모토로 삼고 만들어졌다.)

뭐랄까 나도 뭐라는지 모르겠고 이야기가 많이 세고 있는 듯 한데, 

어찌되었든 리액트를 왜 찬양하는지에 대한 객관적인 자료를 정리하면서 포스팅을 해보려고 한다.

(이 글은 계속 업데이트 될 것이다.)

참고

http://han41858.tistory.com/9

https://subicura.com/2016/06/20/server-side-rendering-with-react.html

http://youngrok.com/React%EC%97%90%20%EB%8C%80%ED%95%9C%20%EC%97%AC%EB%9F%AC%20%EA%B0%80%EC%A7%80%20%EC%83%9D%EA%B0%81#_=_

http://blog.coderifleman.com/2016/04/26/read-the-thinking-about-react/