리액트 VS 타임리프

이 두 개의 차이점에 대해 공부하던 중 좋은 정보가 있어 정리해 보았습니다.

React.JS, Vue.JS는 프론트엔드 개발자가 주로 배우는 SPA용 Javascript 프레임워크입니다.
백엔드에서 구현한 Rest API를 axios 등 HTTP 비동기 통신용 라이브러리를 이용해서 호출 후 결과를 렌더링 하는 기술입니다. 
자체적인 라우팅 기능도 있고, SSR을 지원하는 Next.JS 같은 프레임웍, Redux나 MobX 같은 전역상태관리도 익혀야 하는 등 공부할게 만만치않죠.
또한, react는 비동기로 모든통신을 해야하지만 타임리프는 동기화방식으로 통신합니다. 그리고 SPA와 MPA이기때문에 개발방식또한 엄청난차이가있습니다.
(SPA와 MPA의 차이는 여기를 참고하시면 도움이 됩니다.)

※ 타임리프

• 브라우저(크롬) 주소 창에 url 을 입력합니다.
  그럼 컨트롤러(C)에서 디비 데이터 가져와 모델(M)에 넣은 후, 뷰(타임리프, JSP/JSTL) 에서 모델에 담긴 데이터를 출력 합니다.
  그럼 스프링은 이걸 HTML 문서로 만들어 반환합니다.
  크롬은 HTML 문서를 받았으니 화면에 출력을 하겠죠.
  이걸 Spring MVC 라 하고, 서버에서 HTML 문서를 만들었니 SSR 이라 합니다.
  
  

※ 리액트

• 그런데, 이런 방식 말고 다르게 할 수도 있습니다.
  자바 스크립트로 데이터(json) 만 요청을 합니다. fetch, axios, ajax 이런 걸 쓰는거죠.
  그럼 컨트롤은 디비 데이터를 가져와 json 문서로 만들어 반환합니다. 모델, 뷰 가 필요 없는거죠.
  클라이언트는 데이타를 반환 받아 조합해서 html 문서를 만듭니다.
  클라이언트에서 html 문서를 만들었으니 CSR 이라 합니다.
  이 과정을 프레임웍으로 만들어 둔게 react, vue 등이 되는 겁니다.

결국, 리액트와 타임리프는 같이 쓸 일이 없는거죠