[React] 자바개발자의 리액트 입문 과정

리액트 간단 소개

리액트는 페이스북이 개발하고 있는 아주 핫한 UI library 입니다.
프론트엔드 개발자 사이에서 핫한 3대장(Vue, Angular, React)중 하나라고도 하죠.
리액트는 웹 페이지 내부의 각 부분을 컴포넌트 단위로 다룰 수 있게 해주며,
각 컴포넌트를 HTML 태그로 작성할 수 있게 해주는 JSX 문법을 사용합니다.
JSX는 풀어쓰면 Java Script Extended, 즉, 자바스크립트 확장 문법이라 할 수 있습니다.
React, Vue와 같은 프론트 라이브러리들의 핵심인 가상 DOM(Virtual DOM) 개념을 사용해 렌더링 성능을 극대화 하는 등 프론트엔드 개발자들 사이에서 주목받고 있는 라이브러리 중 하나입니다.

일반적인 웹 코드는 HTML 내부에서 자바스크립트를 사용했지만
리액트에서는 자바스크립트 내부에 HTML을 사용합니다.
리액트로 만들어진 웹어플리케이션은 부드러운 화면전환과 부드러운 리액션을 제공하기로 평판이 나있습니다.
바로 가상DOM을 이용하여 획기적으로 성능 향상을 이루었기 때문이죠.
가상DOM을 이용해 DOM 전체를 변경하는 것이 아니라, 기존DOM과 가상DOM을 비교 분석하여 변경할 부분만 변경하기 때문에 속도향상이 뛰어납니다.

내가 왜 리액트를?

이런 프론트엔드 라이브러리를 자바 웹개발자인 제가 접해보게 된 계기로는,
현재 격랑의 바다인 프론트엔드 시장에 대한 분석 및 투자도 해볼 겸,
자바스크립트를 더 심층적으로 공부해보고 싶다는 생각도 겸해서였습니다.

시장변화 또한 SPA라는 개념이 화제로 떠오르면서, React, Angular, Vue와 같은 프론트 관련 라이브러리들이 대두되기 시작했죠.
뭐 Next.js나 Nuxt.js 같은 SSR을 적용하게 되면서 SPA 에 대한 논쟁은 사그라들었지만…
많은 웹 관련 업체들 또한 전문성을 바탕으로 백엔드, 프론트엔드 개발자를 구분짓고 채용하기 시작하면서, 스프링/JSP 주니어 개발자인 저로서는 무언가 조급함마저 느끼게 되었습니다.
JSP만 다룰게 아니라 백단은 자바로 개발하더라도, 프론트단은 React나 Vue 와 같은 FE라이브러리들을 사용해야할 필요성을 절감하게 되었습니다.

Vue.js와 React.js 사이에서 많은 갈등이 있었는데요.
(당연히 Angular는 고민도 안함. 러닝커브가 워낙 길어서)
아무래도 더 날것의 JS에 대한 투자를 해보고 싶은 욕심에 React를 선택하게 되었습니다.

물론 React를 배운다는것에 장점만이 있지는 않았습니다.

아무래도 Vue.js와는 다르게 JSX문법이 새롭게 추가되고, 자바스크립트 영역이 확장되면서,

단점

1. 디자인 부분에서 제가 해온 기존의 스프링/JSP 웹개발과는 다르게 개발자가 핸들링해야 할 부분이 더 커지게 되었습니다.
   
2. 그리고 러닝커브도 Vue.js에 비해서 다소 길고, 프론트엔드를 전공하지 못한 저로서는 진입장벽이 조금 높다고 느껴지더군요.
3. IE 8 이하버전에서는 지원을 하지 않고,
4. functional 리액트(es6+를 주로 사용하는)를 사용하기로 결정한 저로서는 IE와의 호환성을 위해 BABEL을 통한 트랜스파일러 과정이 번거롭더군요.

장점

1. 하지만 React를 사용하면 할수록, 리액트만의 컴포넌트 모듈화에 대한 매력과,
   
2. React를 뒷받침하는 여러 프레임워크/라이브러리들을 효율적으로,
   필요하면 즉각적으로 도입할 수 있어서 놀랍고 좋았습니다. (마치 아이언맨3에서 각 부분들(3rd party lib)이 날아와 토니스타크의 몸(React)에 부착되는 장면이 연상되기도)
   물론, 이 부분은 리액트의 view 이외의 기능들 대부분을 '써드파티 라이브러리' 에 의존해야 한다는 단점이 되기도 합니다.

원래는 스프링 환경 위에 node.js를 프론트 서버로 별개로 운영하며, React를 사용하려 했으나,
Stateful한 블로그 포스팅들을 운영하는데 데이터가공을 고려해야 할 서버가 필요할까 라는 데에 생각이 미쳤습니다.
(스프링 환경 위에서 React를 위한 대략의 서버설계(?)도 끝내고, TESTING까지 끝내놓았으나, 적용은 하지 않았습니다. 다음 포스팅인 ‘블로그 개설 과정’에서 자세히 다루어 보겠습니다.)

개발자인 저는 애플리케이션 코드만 관리하며, 서버에 대한 관리는 cloud 벤더사에 맡기고, 언제든지 호출만 하면 실행이 보장되는, 그리고 깃허브를 통한 자동빌드/자동배포를 보장하는, 손쉬운 SEO 설정의 장점도 있는,
Serverless 시스템인 Gatsby.js를 이용해 블로그를 운영하기로 결심했습니다.
👏👏👏(여기까지 분석하고 스펙을 결정하는데 3개월의 시간이 걸린건 함정)

React.js를 공부하기로 한 제가, Gatsby.js까지 도입하여 이 블로그를 개설하게 된 과정은 다음글에서 설명하도록 하겠습니다 ~

읽어주셔서 감사합니다.🖐