가보자고!!!
90
2022-02-22 18:36:13
3
1826

리액트 vs 타임리프


현재 스프링을 배우면서 thymeleaf를 사용하고 있습니다.

타임리프를 사용해보니, 프론트의 프레임워크인 react나 vue.js가 추가적으로 어떠한 일을 하는지 궁금증이 생겼습니다.

만약 react를 사용한다면 타임리프 사용할 필요가 없는건가요? 아니면 react와 타임리프를 모두 동시에 사용해야 하는건가요?

(react와 vue.js를 배워본적이 없어서 질문이 조금 모호한점 양해부탁드립니다ㅠ)



0
  • 댓글 3

  • KIMYOUNGRAN
    1k
    2022-02-22 19:02:57

    둘이좀 다릅니다 react는 비동기로 모든통신을 해야하지만 타임리프는 동기화방식으로 통신합니다. 그리고 SPA와 MPA이기때문에 개발방식또한 엄청난차이가있습니다.

  • CodeDiver
    1k
    2022-02-22 23:58:26

    React.JS, Vue.JS는 프론트엔드 개발자가 주로 배우는 SPA용 Javascript 프레임웍이라서 

    백엔드에서 구현한 Rest API를 axios 등 HTTP 비동기 통신용 라이브러리를 이용해서 호출 후 결과를 렌더링 하는 기술입니다. 

    자체적인 라우팅 기능도 있고, SSR을 지원하는 Next.JS 같은 프레임웍, Redux나 MobX 같은 전역상태관리도 익혀야하고.. 공부할게 많아서 만만치가 않더군요.

    리액트 며칠 공부해보시면 감이 오실것 같습니다.

  • 장독깨기
    6k
    2022-02-23 01:24:13 작성 2022-02-23 04:10:36 수정됨

    브라우저(크롬) 주소 창에 url 을 입력합니다.

    그럼 컨트롤러(C)에서 디비 데이터 가져와 모델(M)에 넣은 후,

    뷰(타임리프, JSP/JSTL) 에서 모델에 담긴 데이터를 출력 하잖아요.

    그럼 스프링은 이걸 HTML 문서로 만들어 반환합니다.

    크롬은 HTML 문서를 받았으니 화면에 출력을 하겠죠.

    글쓴님이 지금까지 한 게 이 부분입니다.

    이걸 Spring MVC 라 하고, 서버에서 HTML 문서를 만들었니 SSR 이라 합니다.


    그런데, 이런 방식 말고 다르게 할 수도 있습니다.

    자바 스크립트로 데이터(json) 만 요청을 합니다. fetch, axios, ajax 이런 걸 쓰는거죠.

    그럼 컨트롤은 디비 데이터를 가져와 json 문서로 만들어 반환합니다. 모델, 뷰 가 필요 없는거죠.

    클라이언트는 데이타를 반환 받아 조합해서 html 문서를 만듭니다.

    클라이언트에서 html 문서를 만들었으니 CSR 이라 합니다.

    이 과정을 프레임웍으로 만들어 둔게 react, vue 이런게 되는거죠.


    차이점이 좀 구분 되는지 모르겠습니다. 그니까, react 와 타임리프를 같이 쓸 일이 없는거죠.

    열심히 하세요. :)

  • 로그인을 하시면 댓글을 등록할 수 있습니다.