리액트를 다루는 기술 이라는 책을 바탕으로 노트한 것입니다.
개인 학습용으로 올린 것이며, 문제가 될 시 삭제하겠습니다 :)

1.1 왜 리액트인가

기존의 프레임 워크들 ⇒ MVC( Model- View- Controller)

모델과 뷰를 사용한다.

하지만 리액트는 오직 View만 신경 쓰는 라이브러리이다

component

컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념,

템플릿은 보통 데이터 셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데,

이와 달리 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하며,

컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

초기렌더링

초기 렌더링 : 맨 처음 어떻게 보일지를 정하는 것

리액트 ⇒render( ){...} 함수

• 컴포넌트가 어떻게 생겼는지 정의하는 역할
• html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
  
• 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있다.
• 이 때 render 함수를 실행하면 , 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링된다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용해 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소에 주입
  

조화과정

'업데이트'라고도 불린다. → 하지만 실제로는 새로운 요소로 갈아 끼우는 것이다.

• 데이터를 업데이트 하면, 새로운 데이터를 가지고 render 함수를 또 호출 → 그 데이터를 지닌 뷰를 생성해 낸다
  
• 하지만 이때 render 함수가 반환하는 결과를 바로DOM에 반영하는 것이 아니라, 이전의 컴포넌트 정보와 비교를 한다. → 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트
  

1.2 리액트 특징

Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것

DOM은 뭐지?

→ Document Object Model

• 객체로 문서 구조를 표현 ( 우리가 아는 XML, HTML)
• DOM은 동적 UI에 별로다.

Virtual DOM 을 사용하면 실제 DOM에 접근하여 조작하는 대신

추상화한 자바스크립트 객체를 구성해서 사용,

리액트가 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 하는 과정

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM에 있던 내용과 현재 내용 비교
3. 바뀐 부분만 실제 DOM에 적용

리액트는 라이브러리지만, 함께 쓸 수 있는 수많은 라이브러리들이 있다

1.3 작업 환경

node.js 
npm ,yarn
visual studio
git

Node.js ?

프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용한다.

• babel : ES6를 호환시켜줌
• webpack : 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때마다 웹 브라우저를 리로딩 등..
• 후반에는 Node.js로 백엔드 서버 구현
• npm : Node.js 패키지 매니저 도구
• yarn : npm 대신 사용 가능한 도구 npm보다 빠른 것이 장점

1.4 create app

$ yarn create react-app <프로젝트명>

cd hello-react

yarn start : 시작하기