본문 바로가기

React

#1. ReactJS 소개

React 도입.pptx


소개


 JavaScript 어플리케이션을 어떻게 구조화 할까? AngularJS? Ember? 뭐를 사용해야 되는거지??

ReactJS는 프레임워크( 틀을 제공 - 필요기능 대부분 구현되어 있어 틀을 벗어날 수 없음 )가 아닌 UI를 만들기 위한 라이브러리이다.

즉, 다른 프레임워크나 라이브러리와 혼용해서 사용할 수 있다.


React는 무엇인가 :  Virtual DOM과 Reconciliation

 React는 HTML Element들을 Virtual DOM을 이용해 표현하고 있다. Virtual DOM 은 가상의 HTML Element들을 가지고 있다가, 새로 그릴때 필요한 부분만 업데이트 ( DOM 조작 ) 하는 방식이다.

 jQuery를 사용하는 경우 밑의 예제처럼 셀렉터를 이용하여 해당 DOM을 찾은 후 조작을 해줘야 한다. 하지만 해당 구현의 문제점은 jQuery 셀렉터로 업데이트를 하여 전체 페이지가 새로 그린다고 가정하면 느려질 수 밖에 없다. 그리고 사용성 문제도 일어나게 되는데, '수량'을 보여주는 inputBox에 키보드 커서가 올려져 있었다면 업데이트 후 커서가 사라지게 되는 문제가 있다.

 React는 해당부분만 업데이트 하기 때문에 이런 문제들은 해결이 된다. 



ReactJS를 사용하는 이유



 View를 수정하기 위해서는 기존에는 위와 같이 작업을 해야한다. 무엇을 바꿀지 모두 알아야 되고 DOM을 직접처리하는 경우 성능문제와 관리문제(?)가 생긴다. 



DOM을 직접 처리하는 게 왜 비효율적인가?



 브라우저의 workflow ( 궁금하면 검색해봐 ) 를 다시 보면,

 HTML -> HTML parser를 통해 DOM tree 생성 -> stylesheet와 attach를 통해 render tree 생성

-> layout -> paint


 과정이다.


 여기서 DOM을 수정하게 되면 render tree를 새로 만들어 layout, paint를 다시 호출하게 된다. 


만약 DOM 조작이 30번인 경우 layout, paint 작업을 30번 반복해야 하는 문제가 발생한다. 이걸 


한번에 모아서 layout, paint 한번만 하면 좋을텐데



 




 React가 무엇이 update되었는지를 판별하여 그것만 그려줌.

 View는 model을 보고 그리기만 하면 됨.

 => 정확히 무슨뜻인지 모르겠음...


 [위와 관련된 영상]

https://www.youtube.com/watch?v=BYbgopx44vo



 1) 다른 framework처럼  controller, directive 등 많은 것을 알 필요가 없다. 단지 'Controller'


 2) garbage collection 지원 잘되고, 성능이 좋음


 3) 서버, 클라이언트 렌더링 모두 지원
   서버 렌더링을 하는 이유
   - 검색 엔진 최적화 ( 구글 검색 ) : 단 서버 성능이 좋고 , 분산처리를 잘 해놓은 경우 추천
   - UI 버벅거림 방지 : 서버쪽에서 HTML 태그를 생성하여 전송해줌


 4) UI 수정 및 재사용이 편리함


 5) 타 framework와 library와 혼용해서 사용가능


ReactJS 단점


  View only

 


'React' 카테고리의 다른 글

#4. React 성능과 렌더링  (0) 2017.06.19
Tip  (0) 2017.05.23
#3. Redux  (0) 2017.05.23
TroubleShooting  (0) 2017.05.22
#2. ReactJS 시작하기  (0) 2017.05.16