[React] React

1. React

MVC, MVVM, MVW 등의 프레임워크의 공통점은 Model이 있다는 점이다. Model은 양방향 바인딩의 특징을 가지고 있다. 즉, View의 값이 변화하면 Model도 변화하고, Model의 값이 변화하면 View의 값도 변화하는 특징을 가지고 있다. 여기서 변화(Mutation)는 특정 이벤트 발생 시 Model의 변화를 일으키고 어떤 방식으로 View를 업데이트를 해야할지를 정해야하는 복잡한 작업이다.

 

이러한 복잡한 과정을 해결하기 위해서, Facebook은 변화를 하지 않고 그 대신 데이터가 변경되면 기존의 View를 삭제하고 새로운 View를 만드는 개념으로 접근하게 되었다. 하지만 브라우저는 DOM 기반으로 동작하기 때문에, 페이지가 어떠한 상황마다 View를 생성하게 되면 성능적인 부분에서 문제가 생긴다. 따라서 변화가 이루어지면 Javascript로 이루어진 가상의 DOM에서 한번 렌더링하고, 기존의 DOM과 비교를 하여 변화가 필요한 부분에서만 업데이트를 하는 Virtual DOM이 생겼다.

---

[참고] www.youtube.com/watch?v=BYbgopx44vo

 

 

 

2. 사용 이유

Virtual DOM은 React뿐만이 아닌, Vue, Marko, Maquette, Mithril, 등 다양한 라이브러리에서도 사용된다. 그럼에도 불구하고 React를 사용하는 이유는, 어마어마한 생태계와 Airbnb, BBC, Cloudflare, Codeademy, Facebook 등 사용하는 곳이 굉장히 많다는점, 그리고 통계적으로도 많은 사랑을 받고 있기 때문이다.

 

 

 

3. WebPack, Babel, CodeSandbox

WebPack은 코드를 의존하는 순서대로 잘 합쳐서 하나 혹은 여러개의 파일로 결과물을 만들어 낸다. 예를 들어, Javascript 파일에서 PNG 파일을 가져온다(import)고 할때, Bundling 작업을 수행할 때 특정 확장자마다 어떠한 처리를 하도록 준비해준다. 또한 Javascript를 여러개를 만들었을 때, 하나의 파일로 만들어준다. 기본적으로 하나로 만들어주지만 원한다면 여러개로 분리할 수 있다. 즉, 웹 프로젝트를 만들때 전체적으로 파일을 관리하는 도구이다.

 

Babel은 Javascript 변환 도구이다. Javascript는 지속적으로 발전하는 만큼 구 버전의 브라우저에서 동작하지 않는 경우가 있는데, 이를 가능하도록 도와준다.

 

CodeSandbox는 손쉽게 React를 익히는데 좋은 사이트이다.

CodeSandbox

---

[참고] react-anyone.vlpt.us/01.html