React

React

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
• 인터랙션이 많은 웹 앱을 개발하기 위해서 주로 사용

 

Framework vs Library

• Framework : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음
• Library: 어떠한 특정 기능을 모듈화 해놓은 것
• 프레임워크는 라이브러리를 포함하고, 작성한 소스 코드를 호출함
• 소스코드는 어떠한 기능을 구현하기 위해서 라이브러리를 호출함

 

리액트가 라이브러리?

• 리액트는 전적으로 UI를 렌더링 하는데 관여하기 때문
• 화면을 바꾸는 라우팅은 react-router-dom 모듈 사용
• 상태 관리를 위해서는 redux, mobx 등 여러 모듈 사용
• 빌드를 위해서는 webpack, npm 등 사용
• 테스팅을 위해서 Eslint, Mocha 등 사용

 

Component

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 리액트는 여러 컴포넌트 조각으로 이루어져 있음
• 클래스 컴포넌트를 이용해서 많이 개발을 했지만, 리액트 Hooks 발표 이후부터는 함수형 컴포넌트를 이용해서 개발을 많이 함

 

클래스형 컴포넌트

class App extends Component {
  render() {
    return <h1>안녕하세요.</h1>;
  }
}

 

 

함수형 컴포넌트

function App() {
  return <h1>안녕하세요.</h1>;
}

 

 

브라우저가 그려지는 원리 및 가상돔

웹 페이지 빌드 과정(Critical Rendering Path CRP)

• 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있음
• 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정

• DOM Tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 결정
• Render Tree 생성: DOM과 CSSOM을 결합하는 곳이며, 화면에 보이는 모든 콘텐츠의 콘텐츠, 스타일과 정보를 모두 포함하는 최종 렌더링 트리 출력. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함함
• Layout(reflow): 이 단계는 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계
• Paint: 실제 화면에 그리기

 

가상 돔(Virtual DOM)

• 실제 DOM을 메모리에 복사한 것

 

• 데이터가 바뀌면 가상 돔에 렌더링되고, 이전에 생긴 가상 돔과 비교해서 바뀐 부분만 실제 돔에 적용시킴
• Diffing: 바뀐 부분을 찾는 과정
• reconciliation(재조정): 바뀐 부분만 실제 돔에 적용시켜주는 것

• 가상 돔 덕분에 만약 요소가 30개가 변하였다고 하더라도 한 번에 묶어서 한 번의 실제 돔 수정으로 처리하므로 돔을 조작하는 비용을 줄일 수 있음