Why React?
컴포넌트
html 의 body 부분에는 header/nav/article/footer 등으로 구성되있습니다
웹 페이지 작성 중 관리자가 header 나 nav 같은 필수 요소들의 수정이 필요하다면
정말 큰 웹 사이트에서는 페이지가 너무 나도 많기 때문에 중복코드를 계속해서 작성하면
현직 프로그래머들은 너무 힘들것 입니다
이러한 중복코드 작성을 산탄총 수술 (shotgun surgery) 이라고 합니다
산탄총 수술 문제를 해결하려면 어떻게 해야할까요?
header 와 nav footer 요소들을 별도의 파일이나 모듈로 만들어 놓은 뒤에 컴포넌트라는 이름으로
우리가 필요할 때에 컴포넌트의 이름으로 불러다가 호출해서 사용하면 편할 것 입니다
이렇게 다른 페이지에서도 사용해야하는 요소들을 컴포넌트라는 이름으로 불러서 사용하는 방식을 컴포넌트화 방식이라고 합니다
컴포넌트화를 시킨 상태에서 위에 말한 산탄총 수술과 같은 상황이 벌어지면 컴포넌트 파일만 수정하면 다른 파일들을 수정할 필요가 없어서 훨씬 더 효과적이라고 생각됩니다
이러한 상황 떄문에 react를 사용해야 합니다
React 는 컴포넌트 기반 UI 라이브러리이기 때문에 요소들을 컴포넌트화 시켜서 편리하게 관리 가능함
선언형 프로그래밍
jQuery 같은 명령형 프로그래밍은 절차를 하나하나 다 나열해야합니다
하지만 react는 선언형 프로그래밍이고 목적을 바로 말하는 프로그래밍이기 때문에
누구나 쉽고 빠르게 접근 할 수 있고 프론트엔드 측면에서 조금 더 접근하기 쉽습니다
Virtual Dom
브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용합니다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현입니다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다.
React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어집니다. 그럼 가상 DOM이 왜 존재하나요? 왜냐하면 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문입니다. 그래서 React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리합니다. 가상 DOM은 일종의 DOM의 메타데이터, DOM의 요약본이라고 볼 수 있습니다.
기존에는 화면을 다시 그릴 때마다 jQuery나 document.getElementById, document.querySelector 등을 통해 DOM 노드를 검색하고 수정하거나 특정 위치에 노드를 추가-삭제했는데, 이렇게 DOM 노드에 CRUD 작업을 수행하는 것은 비싼 작업이기 때문에 Virtual DOM이라는 개념이 등장했다. Virtual DOM은 일종의 DOM 캐싱, DOM 버퍼링이라고 볼 수 있다.
