React - 시작하기

React 시작하기 전

ES6 (ECMA Script 2015 ) 방식으로 정리 할 내용이다.

 ES6가 익숙하지 않다면 먼저 ES6부터 숙지하고 오는걸 추천한다.

(이게 ES6방식인지 React방식인지 구분을 할 수 있기 위함 )

먼저 책은 

리액트를 검색하다보면 한번쯤 봤을 법한 VeloPert(김민준)이 쓴 

리액트를 다루는 기술 이라는 책으로 배워볼 생각이다.

(책 설명이 괜찮게 나와 있어서 맘에 듬 ㅎ)

리엑트란 무엇인가

“컴포넌트” 라는 개념에 집중이 되어있는 페이스북 개발자들이 만든 라이브러리이다. 

간단히 설명하자면, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여준다. 

 페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했습니다. 

그리고 해당 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보여지게 되는 뷰(View), 그리고 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러 (Controller) 로 이뤄진 MVC 패턴, 그리고 MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이뤄져있죠.

여기서 공통점은 바로 모델입니다. 방금 언급했던 프레임워크들의 모델은, 대부분 어떻게 작동하냐면, 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜줍니다. 여기서 핵심적인 부분은 변화시켜준다는 부분입니다. 일단 첫 화면을 보여주고, 변화에 따라 필요한곳을 바꿔주는거죠.

**”변화(Mutation)”**라는것은 상당히 복잡한 작업입니다. 특정 이벤트가 발생했을때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM 을 가져와서 어떠한 방식으로 뷰를 업데이트 해줄 지 로직을 정해줘야 하는데요, 페이스북에서는 리액트를 만들기전에 이러한 발상을 했습니다.

Virtual DOM(가상의 DOM)을 이용하여 View를 바꾸는 방식으로 

변화가 일어나면, 실제로 브라우저의 DOM 에 새로운걸 넣는것이 아니라, 

자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 

기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것

이해를 돕기 좋은 동영상

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

출처 : https://velopert.com/3612