리액트 시작하기(기본개념)

기본 개념

리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리이다.

React의 특징

1. 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 문법을 사용한다
2. 단방향 데이터 바인딩(One-way Data Binding)을 사용
3. React는 선언형이다.
4. React는 컴포넌트 기반으로 재사용성이 뛰어나다.
5. React는 Virtual DOM(가상돔)기반으로 가볍다.
6. React 컴포넌트는 state와 props 을 가진다.

브라우저 렌더링

웹 페이지가 렌더링 되는 과정

1. HTML parser가 HTML을 바탕으로 DOM tree를 그린다.

2. CSS parser가 CSS를 바탕으로 CSSOM을 그린다.

3. DOM에 CSSOM을 적용하여 Render Tree를 그린다.

CSSOM은 DOM에 CSS가 적용된 객체 모델

4. Render Tree를 바탕으로 Painting 하여 실제 화면에 렌더링 한다.

   • HTML 코드를 읽어 내려가다가 <script></script>태그를 만나면 파싱을 잠시 중단하고 js 파일을 로드한다.

Virtual DOM(Document Object Model)

DOM이란?

• DOM은 HTML, XML 문서의 프로그래밍 interface이다.
  즉 DOM을 활용해서 그저 텍스트 파일이기만 했던 HTML이나 XML 문서(document)에 프로그래밍 언어가 접근할 수 있도록 한다.
• DOM은 이름 그대로 문서 구조를 트리 형태의 객체(Object)로 표현한다.
• 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하게 된다.

동적으로 웹 페이지를 변경하다 보면 element의 생성, 수정, 제거 등 DOM을 변화시키는 수많은 연산이 생기게 된다. 웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용하게 되는데, CSS 연산을 다시 하고 페이지를 리 페인트 하는 과정은 시간과 비용을 많이 소모하게 된다.

하지만, 그렇다고 DOM을 사용하지 않을 수도 없다. 결과적으로 웹 브라우저는 최종적으로 DOM을 보고 웹 페이지를 그리기 때문이다.

Virtual DOM - 가상 돔

React는 Virtual DOM을 활용해 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 즉 동적으로 데이터가 변화했을 때 직접적으로 DOM을 조작하는 것이 아니라 DOM의 사본이라고 할 수 있는 새로운 Virtual DOM을 생성한다.

가상의 돔 트리를 사용해서 이전의 상태와 이후의 상태를 비교하여 변경된 부분의 DOM 만을 변경한다.

→ 조화 과정(reconciliation)

• 가상돔은 자바스크립트 객체의 형태로 표현된다.
• 메모리 상에서 동작하기에 빠르면서 실제 렌더되는 것이 아니기에 연산 시간이 최소화된다.
• Virtual DOM과 Real DOM 을 비교하여 변경된 사항만 반영하여 해당 내용을 실제 돔에서 수정하고 렌더링한다.

참고
React에서 리렌더링이 일어나는 경우

1. Props가 변경되었을 때

2. State가 변경되었을 때

3. forceUpdate() 를 실행하였을 때.

4. 부모 컴포넌트가 렌더링되었을 때

Component Based Development

Component 단위로 개발을 해야한다.

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.

• 독립적인 코드 블럭(HTML + CSS + Javascript)
• 중복되는 키워드를 하나의 컴포넌트로 표현하고 싶다.(이것을 이룬게 react이다.)
• 작업의 단위 = 컴포넌트