React?
사용자 인터페이스(=UI, User Interface)를 만들기 위한 JavaScript 라이브러리
Library? Framework?
-
라이브러리 -> 기능들의 집합. 개발자가 원하는대로 프로젝트 구조나 코드를 짤 수 있음. 강제성X
-
프레임워크 -> 웹 어플리케이션을 만들기 위해 필요한 여러가지 기능을 제공하는데, 단순히 기능 제공만 하는 것이 아닌 개발에 있어서 필요한 구조와 기능을 제공해 개발자가 특정 규칙 아래에서 개발하도록 하는 강제성을 띈다.
왜 React를 사용할까?
웹페이지 기본 구성요소인 html, css, javascript만으로도 웹페이지를 만들 수 있지만 React로 짠 코드는 개발자가 직접적으로 신경써야할 부분이 적어진다.
→ DOM에 직접적으로 접근하고 수정하는 일이 적어지고 로직에만 집중해서 코딩할 수 있게 된다.
React의 특징
선언형
-
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다. -
선언형?
Declarative '무엇을 어떻게 할지'가 아닌 '무엇을 하고싶은지'에 초점을 맞춰 개발하는 프로그래밍 방법 -
명령형?
Imperative '무엇을 어떻게 할지'를 구문의 관점에서 연산을 설명하는 프로그래밍 방법
html 마크업 코드 = 선언형 프로그래밍 방식. 화면에 무엇을 보여줄 지 html 태그를 이용해 선언하지만 웹브라우저에서 어떻게 동작하는지, 화면에 어떻게 그려질지에 대한 코드를 작성하진 않음
스크립트 = 명령형 프로그래밍 방식. 무엇을 할지. 컴퓨터가 수행해줬으면 하는 명령을 순서대로 작성.
선언형 방식이 제대로 동작하기 위해서는 명령형으로 어떻게가 구현된 코드들이 내부에 존재해야 하지만 html태그를 사용하는 개발자 입장에서 이런 부분을 신경쓰지 않아도 원하는 무엇에 집중해 개발할 수 있게 하는 방식이 선언형 방법.
개발자가 무엇을 할지에 집중하여 뷰를 개발할 수 있게 데이터를 기반으로 뷰를 효율적으로 렌더링 해줌.
컴포넌트 기반
- 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.
컴포넌트 로직은 템플릿이 아닌 Javascript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.
한 번 배워서 어디서나 사용하기
- 기술 스택의 나머지 부분에는 관여하지 않기 떄문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있습니다.
React는 Node 서버에서 렌더링을 할 수도 있고, React-Native를 이용하면 모바일 앱도 만들 수 있습니다.
Virtual DOM과 DOM
- DOM?
Document Object Model의 약자.
HTML 문서를 제어하기 위한 일종의 인터페이스로 문서 내의 요소를 정의하고, 각 요소에 접근하는 방법을 제공
우리가 웹페이지를 개발하려고 작성한 HTML파일을 기반으로 생성되는 객체들의 집합.
브라우저는 HTML파일을 읽어 Tree 형식의 객체 구조를 생성하는데, 이러한 객체들은 자바스크립트를 이용해 접근 가능하다.
DOM에서 제공하는 인터페이스를 이용해 웹브라우저에 표시되는 내용을 추가, 수정 가능
- Virtual DOM?
리액트에서 좀 더 효율적인 화면 렌더링을 위해 구성된 기술 패턴
요소 단위의 수정을 반영하는게 아닌 변화를 감지하고 한번에 DOM에 수정된 사항을 적용
Virtual DOM 없이 갱신 시 요소가 바뀌면 렌더 트리를 요소가 바뀔 때마다 다시 그리기 때문에 비효율적
화면 구성 요소가 수정되었을 때, 한꺼번에 처리하기 위해 Virtual DOM 이용. Virtual DOM은 모든 업데이트가 끝나면 한번에 적용한다.
Virtual DOM과 React
리액트는 state 기반 렌더링
state가 바뀌면 Virtual DOM이 수정되고 Virtual DOM은 DOM과 비교하면서 변경된 부분을 반영한다.
