[React] 리액트 특징, 라이프 사이클

• 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 오직 사용자의 View 에만 초점을 맞춘다.

---

리액트의 대표적인 3가지 특징

 

JSX문법

• 의미 : 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이다. JSX는 리액트 ‘앨리먼트’(element)를 생성한다.
• 형태 : HTML 문법과 유사하지만, 몇가지 규칙이 있다.
  1. 태그는 꼭 닫혀있어야 한다.
  2. 각 컴포넌트는 하나의 태그를 반환해야 한다.
  3. JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여준다.
  4. 속성 명은 camelCase를 사용한다.
  5. JSX 내부의 주석은 {/* 이런 형태로 */} 작성한다.
   

컴포넌트 기반

컴포넌트란?

💡 한 가지의 기능을 수행하는 UI 단위

• 특징
  • 독립적
  • 재사용 가능
• 리액트 애플리케이션은 각각의 독립적인 컴포넌트를 서로 조합한 것

• 컴포넌트는 트리 형식으로 구성된다.

 

Virtual DOM

• DOM이란?  문서 객체 모델(Document Object Model)은 브라우저가 문자열 형식의 HTML을 이해할 수 없기 때문에 브라우저가 이해하고 활용할 수 있는 구조로 변환한 것이다.
• Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다.
• Virtual DOM을 왜 쓸까?
  • DOM을 브라우저에 렌더링 하는 과정에서 DOM이 복잡하게 구성되어 있거나 CSS가 많이 적용된 사이트일 경우, 성능 저하가 발생하기 때문이다.
  • 브라우저의 렌더링 과정
    • DOM트리 생성->CSSOM트리 생성->렌더트리 생성-> Reflow(Layout)->Repaint(Paint)
  • 리액트에서 리렌더링
    • Virtual DOM 생성-> 이전 Virtual DOM과의 차이점 파악-> 실제 DOM에 전달
    • 덕분에 리렌더링 연산은 한 번만 일어나게 되어, 큰 성능의 이득을 얻는다.

 

---

 

컴포넌트의 라이프 사이클

💡 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 라이프 사이클을 갖는다.

 생성(Mounting)

• 의미 : DOM 객체가 생성되고 브라우저에 나타나는 것

업데이트(Updating)

• 언제 업데이트될까? 
  1. props 값이 변경될 때
  2. state 값이 변경될 때
  3. 부모 컴포넌트가 리렌더링 될 때
  4. this.forceUpdate로 강제로 리렌더링될 때

제거(Unmounting)

• 의미 : 컴포넌트가 DOM에서 제거되는 것