리액트, 뷰 같은 라이브러리 사용할때 서버에서 불러온 데이터 처리
본문
리액트나 뷰 같은 라이브러리 강의를 보니까
데이터 바인딩을 할때
항상 자바스크립트로 변수 선언하고
html 에 변수를 넣더라고요
예제 코드 ( 문법이 정확하진 않습니다. ㅠㅠ 그냥 구조만 봐주세요 )
<p> {{ 변수 }} </p>
<script>
변수 = 1111
<script>
이런식인데
보통 생으로 html 짤때는
바로 php 변수를 넣잖아요
예)
<p> <?php echo 변수 ?> </p>
php가 훨씬 간단해 보이는데
뷰나 리액트 쓰면
php로 서버에서 데이터 받아오고
이 변수를 다시 javascript 변수를 넣어줘야 하나요?
유투브 강좌들은 하나같이 프론트엔드 강좌라 이 부분에 대한 내용이 없네요
답변 2
php는 백엔드 언어
Vue react는 프론트언어입니다. 일단 이 개념을 잡고 가셔야 합니다.
질문에 대한 답부터 드리면 굳이 그럴 필요가...
php 코드로 바로 랜더링 하는데요... 다시 변수 저장해서 2번 작업할 필요성이 없다는 뜻입니다.
이해를 돕기 위해
내 앨범에서 php + sql로 1번 사진을 불러온다고 가정했을때 1번 사진은 보여주면 되는 것을 1번 불러오고 다시 변수 저장해서 자 이제 1번 출력... 할 필요성이 없다는 뜻입니다.
React vue 같은 언어는 CSR로 클라이언트 자체에서 동작하는 시스템입니다.
국룰?로 알려진 해당 js의 페이지는 rest api를 활용한 페이지 제작입니다.
그렇지만 비공식은 있지만 공식적인 기능으로는 불가능합니다.
즉 싹 뜯어 고쳐서 제작하지 않는한 기본적인 그누에서는 해당 라이브러리로는 제작이 어렵습니다.
특히 cdn으로 쓰면 동작은 하겠지만 맨 위 언급한데로 굳이 2번작업을....ㅡ.ㅡ
Cli를 통한 제작은 먼훗날 그누6 혹은 그누7 전문 개발자를 위한 rest api유료버전이 나오지 않는 한
어렵다고 보여집니다.
덧. CSR은 SEO에 취약하므로 둘 중 하나 공부하신 뒤 SSR을 지원하는 nuxt. Next를 배우시길 권합니다.
Vue - nuxt
React - next 입니다.
소위 대세는 nextjs입니다.
Restapi 만 지원되면 정말이지 그누가 급상승할텐데 말이죠 ㅇㅅㅇ
인프런 사이트에 보면 리액트 관련 자료 많아요~ 유료지만 그거 참고해서 개발해보세요
https://www.inflearn.com/courses?s=%EB%A6%AC%EC%95%A1%ED%8A%B8
개발하는데.. 트렌드 따라가려면 다시 공부해야되요..
요샌 php 하나로만은 먹고 살기 힘들어서.. 자바스크립트까지 섭렵해야되고.. 그리고 인강들도 탄탄한 내용들이 많다보니
그거 보시면서 공부 하면 될것같아요
