remagine
REACT JS 공부해보기 본문
REACT JS 공부해보기
다음 프로젝트는 REACT를 사용해서 프론트엔드를 관리하기로 하였습니다.
그래서 공부를 하면서 알게된 내용들을 파편적으로 정리하고자 합니다.
1. REACT VS ANGULAR
저도 많이 했던 질문입니다.
REACT가 낳나요? ANGULAR가 낮나요?
결론적으로는 이 두 개는 비교 대상이 아니라는 것입니다.
REACT는 LIBRARY이고, ANGULAR는 FRAMEWORK입니다.
FRAMEWORK는 필요한 기능이 대부분 만들어 있어서, 이 기능을 활용하여 서비스를 만듭니다. 그래서 FRAME, 틀에서 벗어나는 기능을 만드는 것은 제약이 있습니다.
LIBRARY는 그냥 가져다 쓸 수 있는 코드덩어리 입니다. 다른 LIBRARY와 충돌이 일어나지 않습니다. 가볍고 빠르지만, 기능을 추가로 구현해야 할 때는 다른 LIBRARY를 찾아 쓰거나 직접 구현해야 합니다.
REACT는 VIEW LAYER를 컨트롤하게 도와주는 LIBRARY입니다.
A Javascript Library for Building User Interfaces
2. Virtual DOM
HTML의 문서는 그동안 프로그래밍 언어다 라고 생각을 해왔지만
사실 브라우져가 DOM - 문서객체모델을 생성하기 위한 문법이라고 생각하는게 맞는 것 같습니다.
HTML 문서를 브라우저가 파싱해서 돔 구조를 만들고, CSS를 적용시켜서 클라이언트가 볼 수 있는 화면으로 그려주는 것 입니다.
Virtula Dom은 실제 DOM이 아닌 자바스크립트 객체입니다.
실제 DOM은 변경이 일어나면 자동적으로 브라우저가 화면을 다시 그립니다.
그러나 Virtual DOM은 자바스크립트 객체이고
데이터의 변경이 일어나도 자동적인 새로고침이 일어나지 않는다고 합니다.
3. REACT JS
브라우저는 html문서를 통으로 생각없이 그리는데 특화되었습니다.
브라우저안에 DOM을 동적으로 바꾸는 것은 가능하지만 주특기가 아닙니다.
Vitual DOM은 React가 사용하고 있는 View Controll 방식이라고 생각하시면 됩니다.
React는 diff(차이점)을 활용해서 바뀐 부분만 바꿔주는데 특화된 LIBRARY입니다.
4. COMPONENT
컴포넌트는 REACT가 사용하는 VIEW를 다루는 단위입니다.
다른 프레임워크와는 다르게 간단하다는 장점이 있지만
그만큼 헛점도 있을 듯 합니다.
직접 코딩을 하면서 확인해 보겠습니다.
5. 서버 렌더링, 클라이언트 렌더링
현재 사용하고 있는 RYTHM이라는 TEMPLATE엔지는
서버 렌더링 엔진이라고 볼 수 있을 듯 합니다.
서버가 HTML문서를 DATA를 가지고 만들어서 먼저 보내주고
그 문서를 그리고 난 뒤에 JAVA SCRIPT가 동작합니다.
그러기 때문에 AJAX처럼 클라이언트 요청이 완료되야지만 그릴 수 있는 방식하고 다르게
초기 구동 딜레이가 적습니다.
서버 사이드 렌더링은 검색엔진최적화에 좋습니다.
검색 엔진 봇이 사이트를 확인 할 때
클라이언트 렌더링은 몇몇 검색 엔진 봇에서 확인하지 못합니다.
하지만 서버 사이드 렌더링은 그만큼 많은 자원을 서버가 담당하기 때문에
서버의 부하가 심해지는 단점이 있습니다.
6. REACT 단점
VIEW ONLY
다른 라이브러리를 사용해서 구현해야 합니다.
IE 8 이하 지원 X