이번에는 우선 간략하게 FrontEnd 개발로서 포켓트레이너에 대한 개발을
하며 경험한 큰 덩어리 위주로 설명을 해볼려고한다
🚩왜 리액트를 썼어야 했나?
우선 지금까지 프론트엔드 개발을 하면서 주로 동적인 화면의 전환등을 위해서는 VanilsJs를 사용하여 순수하게 개발을 해왔던 나로서는 리액트라는 것은 은근 JSX라는 문법을 사용하여 더욱 초반에 제대로 공부 전에는 헷갈리는 것 투성이었다😅😄
우선 리액트를 사용해야하는 가장 큰 이유는 성능적으로나 개발론적으로도
효율성 이라고 말할 수 있을 것 같다
우선 프로젝트의 Index.js의 하단에 있는 나름 제일 상단에 있는 컴포넌트 App.js를 봐보자
App.js에는 해당 라우터만 보이지만 각 라우터 밑에는 또 수많은 세부적 라우터로 나뉜다..결론..엄청 많다
맞다..우리 프로젝트는 제공해야하는 페이지 구성이 엄청 많았다😑
그 뜻인 즉슨 코드에서도 보이다시피 각각의 페이지들을 따로 구성한 후 URI를 통해 매 번 브라우저 전체를 랜더링을 통해 보여줘야 한다는 것 이다.
특징1-성능적
- 하지만 UI적으로 다른 것들이 있어도 분명 NavBar 같은 것들은 매번 공통되게 랜더링 되는 요소였다
-불필요한 중복된 요소의 랜더링
특징2-개발론적
- 개발을 하는 데 있어서도 매번 같은 html코드를 복사해서 넣어야 한다..이것또한 몹시 중복되는 요소다
-불필요한 코드의 중복성물론 SHUM 프로젝트를 할 때 사용했던 JSP 같은 데에서는 공통된 부분에 대해서는 페이지 모듈화가 가능했었다😎
Dbu 프로젝트를 진행하는데 있어서도 Django에서도 템플릿 모듈화가 가능했었다😎
하지만 html,VanilaJs 자체만으로는 모듈화에 대한 정확한 기준이나 발표가 없었던게 사실,,,ㅠ
결론적으로
성능적해결-SPA방식
SPA(Single Page Application)는 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다. 이는 서버로부터 완전한 새로운 페이지를 불러오지 않고, jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.
출처:https://helloworld-88.tistory.com/350
즉 초반에만 필요한 정적 리소스들을 서버에서 받아오고
SPA의 핵심인 라우터를 이용하여 브라우저단에서 직접 변경된 부분만 랜더링을 해준다는 측면에서 훨씬 더 좋아보였다!
SPA는 SSR(서버사이드랜더링)이 아닌 CSR(클라이언트사이드랜더링)으로서 상호작용이 아주 많은 우리 프로젝트에는 더 적합하였다.
+Virtual Dom
하지만 아무리 spa방식일지언정 dom요소의 직접적인 조작이 커지고 복잡해질 수록 이 또한 불필요한 연산이 없애기 위해 리액트에서는 DOM요소 이 전에 virtual DOM을 두는 게 특징이다
즉, virtual Dom에서는 실제 DOM에 적용시키기 전에 가상의 dom을 만들어서 최종완성된 결과만 실제 DOM으로 전달하기에 브라우저가 연산하는 양을 줄일 수가 있게된다.
데이터 변경 발생->가상 DOM 리랜더링->이전 DOM과의 비교->변경된 부분 DOM적용
😎따라서 연산비용이 훨씬 감소하는 것을 느낄 수 있다
개발론적 해결-Component 사용
🟧컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI를 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 됩니다.
따라서 우리가 마치 BootStrap처럼 이런 UI 요소를 가져다 쓰는 것처럼
코드의 재사용성이 증가하여 중복성을 낮출 수 있게 된다.
포인트는 캡슐화,재사용성 정도로 보면 될 것 같다
하지만 여기서 짚고 넘어가야할 점은
리액트는 UI라이브러리이다.프레임워크가 아니다!
✏진입장벽의 은근 높음,,더욱 매력적👀
따라서 리액트는 프레임워크가 아니라 라이브러리라는 관점으로서 자유도가 상대적으로 더 높았고 그만큼 프론트엔드 개발자로서 전체적으로 더 배울 수 있는게 더 많았다...물론 그게 엄청난 힘든거였지만..그래도 기존 자바스크립트 문법을 쭉 써오던 나로서는 조금은 더 쉽게 접근할 수 있던게 사실이었다.
진입장벽이 엄청나게 높아 많이 초반에 헤맨것이 사실이지만 그만큼 많은 프레임워크에 갇혀 개발을 하던 나로서는 더욱 도전해보고싶은 자유도였던 것 같다.
또한 지금 타입스크립트를 공부해보는 입장으로서의 초석 또한 리액트를 알지못하면 안했을 것 같다.이러한 하나하나의 매번 만났던 문제점들이 갈수록 더욱 웹에 대한 흥미를 일으켜준 고마운 기회였던 것 같다.
