React ?
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
특징
선언형
React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여준다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하면 된다. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.
선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다.
컴포넌트 기반
스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들자. 그리고 이를 조합해 복잡한 UI를 만들어보자
컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성된다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있다.
한 번 배워서 어디서나 사용하기
기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있다.
React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있다.
React를 배우기 전에
HTML과 JavaScript에 어느 정도 익숙해지는 것이 우선이다. 또한 함수, 객체, 배열, 가능하다면 클래스 같은 프로그래밍 개념을 가지고 있어야한다.
JSX
const element = <h1>Hello, world!</h1>;
위의 코드는 문자열도 HTML도 아닌 JSX문법이다. JSX는 JavaScript를 확장해서 만들었고, React에서 함께 사용할 것을 권장한다. JavaScript의 모든 기능이 포함되어있다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들인다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
ReactDOM
<div id="root"></div>
root안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다.
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다. 즉 변경된 부분만 업데이트를 수행한다.
