김민준님 께서 올리신 유튜브에 나와 있는 ‘누구든지 하는 리액트’와 관련 블로그 글을 통해 리액트 공부를 하려고 한다. 2개월 동안읜 동계 계절학기 기간 동안 스타트업에서 리액트를 사용하기 떄문이다.
리액트는 무엇인가?
어떠한 HTML 코드가 있다고 하자.
<div id="number">0</div>
이 0값을 바꿔주려면 각 DOM에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해줘야 한다. jquery를 사용한다면 document.getElementByID 대신에
‘$(‘#number’)’ 이런 식으로 사용할 것이다.
프로젝트 규모가 커지게 된다면 많은 DOM 요소들을 직접 관리하고 코드를 정리하는 건 힘든 일이다. 그래서 나오게 된 라이브러리 혹은 프레임워크들이 angular,ember,backbone,vue,react등이 있다.
3대장 : react, angular, vue -> 똑같은 문제를 다른 방식으로 해결.
angular
라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있다. 프레임워크 차원에서는 성숙하지만, 타입스크립트랑 함께 사용.
React
“컴포넌트”라는 개념에 집중이 되어있는 라이브러리. 프레임워크가 아니다. 컴포넌트를 간단히 설명하면 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여주는 것. HTTP 클라이언트, 라우터, 심화적 상태 관리등의 기능들은 내장되어 있지 않다. 공식 라이브러리같은 개념이 딱히 없다.
Vue
입문자가 사용하기 쉽고, Webpack 같은 모듈 번드러를 사용하여 프로젝트를 구성해야 하는 리액트와 앵규러와 달리 CDN에 있는 파일을 로딩하는 형태로 불러와서 사용. Vue는 리액트와 앵귤러의 장점을 다 가지고 온 느낌?
각 도구들의 철학과 추구하는 방향이 다르다는 것을 알게 될거다. 조금씩 써보고 배워보자.
페이스북은 왜 리액트를 만들게 되었을까?
MVC 프레임워크 데이터단을 담당하는 모델 / 사용자의 화면에서 보여지게 되는 뷰/ 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러. 이로 인해 파생된 MVVM,MVW등의 패턴.
공통점은 -> 모델. 대부분 모델에 있는 값이 변하면 뷰에서 이를 변화시켜준다.
페이스북 ->데이터가 바뀌면 뷰를 날려버리고 새롭게 만들어버리면 어떨까?
dom 기반으로 작동하는 페이지가. 그 떄 그 떄 새로운 뷰를 만든다? -> 성능적 문제 발생. 따라서 사용하는게 virtual DOM.
실제 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, 자바스크립트로 이루어진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 변화가 필요한 곳에 업데이트를 해줌.
내용 참고 : https://www.youtube.com/watch?v=muc2ZF0QIO4
React가 특별한 이유
- Virtual Dom을 성공적으로 사용한 선발주자
- 엄청난 생태계
- 사용하는 곳이 많다.
앞으로 어떻게 공부할까
- 구글링!
참고자료