Chapter 01 : 리액트 시작

🎯 리액트 탄생

• 어떤 데이터가 변할때마다 변한 부분을 찾고 규칙을 정하는 작업은 간단, but 규모가 크면 성능 저하.
• 이를 해결하기 위해 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 아이디어 고안.

---

🎯 리액트 이해

1. 오직 V(view)만 신경 쓰는 라이브러리.

2. 컴포넌트

• 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체.
• 재사용이 가능한 API로 수많은 기능들 내장.
• 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식 정의 .

3. 초기 렌더링

• 어떤 라이브러리, 프레임워크간에 처음 어떻게 보일지를 정하는 작업.
• render( ) 함수
  • 컴포넌트가 어떻게 생겼는지 정의.
  • HTML이 아닌 뷰가 어떻게 생겼고 작동하는지에 대한 객체 반환.
  • 컴포넌트 내부에 컴포넌트 들어갈 수 있다. 이때 내부 컴포넌트 부터 재귀적으로 렌더링.
  • 이 정보를 가지고 HTML 마크업을 하고 실제 페이지 DOM 안에 주입.

4. 조화 과정

• 새로운 요소로 갈아 끼우는 과정. render( ) 함수가 진행.
• 값이 변했을 때 이전에 만든 컴포넌트와 정보를 비교 후 DOM 트리를 업데이트.

---

🎯 리액트 특징 ( Virtual DOM 사용 )

1. DOM 이란?

• 객체로 문서 구조를 표현하는 방법
• 트리 형태로 특정 노드를 찾거나 수정, 제거, 삽입할 수 있다.

2. Virtual DOM

• 실제 DOM이 아닌 추상화한 자바스크립트 객체.

• 리액트에서 데이터가 변하여 실제 DOM을 업데이트 하는 과정

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

---

🎯 작업 환경 설정

1. Node.js

• 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임.
• 개발 주요 도구
  1. 바벨 : ES6 문법 호환.
  2. 번들링 : 모듈화된 코드를 한 파일로 합치는 과정.
  3. 웹팩 : 코드 수정할 때마다 웹 브라우저 리로딩.
• 패키지 매니저 도구
  • npm, yarn

2. 에디터 설정

• VSCode market 에서 설치
  1. ESLint : 자바스크립트 문법, 코드 스타일 검사.
  2. Reactjs Code Snippers : 단축 단어 자동 생성.
  3. Prettier-Code formatter : 코드 스타일 자동 정리

3. CRA 도구( create react-app)

• 리액트 프로젝트에 필요한 웹팩, 바벨 환경을 간편하게 구축 해주는 도구
• react-app 생성 (yarm 이용)

    yarn add react-app "프로젝트 이름"
    npm install react-app "프로젝트 이름"