React | 리액트 기본

리액트(React)란 ?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용

Angular, Vue와의 차이점 --> 둘은 프레임워크, 리액트는 라이브러리

 

cf. 프레임워크(framework) vs 라이브러리(library)

프레임워크: 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있음)

라이브러리: 어떠한 특정한 기능을 모듈화해놓은 것

=> 프레임워크는 라이브러리를 포함하고 소스코드를 호출함

=> 소스코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출함

 

리액트가 라이브러리인 이유 ?

리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문 !

 

화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며

상태관리를 위해서는 redux, mobx 등 여러 모듈을 사용하고

빌드를 위해서는 webpack, npm 등을 사용하며

테스팅을 위해서도 Eslint, Mocha 등을 이용하기 때문에 리액트는 프레임워크가 아닌 라이브러리 !

 

리액트를 사용하는 이유는 ?

리액트를 사용하는 기업이 굉장히 많음 (ex. 애플, 마이크로소프트, 아마존, 넷플릭스, 에어비앤비, 슬랙, 페이팔 등)

해외 기업뿐만 아니라 국내 주요 기업들도 프런트엔드를 위해 리액트를 많이 사용하고 있음

 

왜 많은 곳에서 사용할까 ?

1. 상대적으로 배우기 쉬운 라이브러리

2. 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경

3. 많은 기업들의 사용으로 검증이 된 라이브러리

 

리액트 컴포넌트란 ?

컴포넌트(Component)

리액트로 만들어진 앱을 이루는 최소한의 단위

 

리액트는 여러 컴포넌트 조각으로 구성되어 있음

ex. 인스타그램 페이지의 경우

- 검색 컴포넌트

- 프로필 컴포넌트

- 스토리 컴포넌트

- 포스트 컴포넌트

등으로 컴포넌트가 나누어져 있음을 알 수 있음

 

=> 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있고

여러 명이 각자 맡은 컴포넌트를 동시에 수행할 수 있음

 

1. 클래스형 컴포넌트

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

 

2. 함수형 컴포넌트

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

 

원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만

리액트에서 리액트 Hooks라는 것을 발표한 이후에는 함수형 컴포넌트를 이용해서 개발을 많이함

 

리액트 앱 설치 방법

리액트 앱을 만들 폴더 생성 --> 터미널 실행 --> 코드 입력

npx create-react-app <폴더이름>

 

 

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

리액트의 특징 중 하나는 가상돔을 사용한다는 것 !

가상돔을 왜 사용하는지 알기 위해 브라우저가 렌더링하는 과정을 알아보려고 함.

 

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

브라우저가 서버에서 페이지에 대한 html 응답을 받고 화면에 표시하기 전에 여러 단계가 있음

웹 브라우저가 html 문서를 받고, 스타일 입히고, 뷰포트에 표시하는 과정 !

 

 

DOM tree 생성

렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 애용을 페이지에 렌더링할지 결정함

↓

Render tree 생성

브라우저가 DOM CSSO을 결합하는 곳. 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력함. 즉 화면에 표시되는 모든 노드와 콘텐츠 및 스타일 정보를 포함함

↓

Layout (reflow)

브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계

↓

Print

실제 화면에 그리기

 

▶ 여기서 문제점 !

어떤 인터렉션에 의해 dom에 변화가 발생하면 그 때마다 render tree가 재생성됨.

즉 모든 요소들의 스타일을 다시 계산, layout, repaint 과정까지 다시 거치게 됨

 

인터렉션이 작은 경우는 괜찮지만 인터렉션이 엄청나게 많다면 ?

작은 변화로 인해 필요한 과정을 계속 거치게 되니 불필요하게 dom을 조작하는 비용이 너무 크게 됨

 

▶ 이러한 문제로 나오게 된 것이 가상 돔(Virtual DOM)

실제 DOM을 메모리에 복사해준것

 

출처: https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_1-%E1%84%80%E1%85%A1%E1%84%89%E1%85%A1%E1%86%BC%E1%84%83%E1%85%A9%E1%86%B7-virtualdom-%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%80%E1%85%B5

 

데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교하여 바뀐 부분만 실제 돔에 적용시켜줌

바뀐 부분을 찾는 과정을 Differing이라고 부르며,

바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(Reconciliation)이라고 부름

 

출처: https://www.google.com/url?sa=i&url=https%3A%2F%2Fdev.to%2Fridhamz%2Fthe-reconciliation-algorithm-5bab&psig=AOvVaw30afkFpUYqRwkv5rtGav35&ust=1721188395614000&source=images&cd=vfe&opi=89978449&ved=0CBEQjRxqFwoTCJCV9cjUqocDFQAAAAAdAAAAABAE

 

가상 돔 덕분에 만약 요소가 30개가 변하였다고 해도 한 번에 묶어서 한번의 실제 돔 수정으로 처리하게 되어

돔을 조작하는 비용을 줄일 수 있게 됨 !

 

웹팩이란 무엇인가요 ?

오픈소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

 

장점은 ?

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용 절감 가능

2. 모듈 단위로 개발이 가능하여 가독성과 유지보수가 용이함 (여러 파일을 한 번에 묶을 수 있음)

 

바벨(babel)이란 무엇인가요 ?

최신 자바스크립트 문법을 지원하지 않는 브라우저를 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 쓸 수 있게 변환시켜주는 라이브러리

// babel input ES6
[1,2,3]map(n) => n + 1;

// babel output ES5
[1,2,3]map(function(n) (
  return(n+1) 
));

 

npx create-react-app => npx는 무엇인가요 ?

npx는 노드 패키지 실행을 도와주는 도구.

create-react-app이란 npm 레지스트리에 있는 패키지를 react-tictactoc-app 폴더에서 실행해서 리액트를 설치해줌

 

 

같이 보면 좋을 블로그)

 

Vanilla Javascript로 가상돔(VirtualDOM) 만들기 | 개발자 황준일