[React] 왜 리액트인가?

1. 리액트의 등장

1) 왜 리액트인가?

• 최근 전 세계 개발자는 자바스크립트에 열광하고 있다.

  ex) 데스크톱 애플리케이션: 슬랙, 아톰, VS CODE 등을 일렉트론 (자바스크립트 프레임워크)로 개발하였다.

  ex) 모바일 애플리케이션: 페이스북, 디스코드, 페이팔, 이베이 등을 개발하였다.

• 애플리케이션 구조를 관리할 때 특별한 도구 없이 순수하게 자바스크립트로만 관리하는 것은 어렵다.

  -> 따라서 수많은 프레임워크가 조금씩 다른 관점에서 이를 해결하였고 있다.

• 자바스크립트 프레임워크들은 주로 MVC 아키텍처, MVVM 아키텍처를 사용한다. (AngularJS는 MVW 아키텍처)

• MVC, MVVM, MVW의 공통점: 모델 model 과 뷰 view가 있다.
  -> 모델: 애플리케이션에서 사용하는 데이터를 관리 / 뷰: 사용자에게 보이는 부분
  -> 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경 사항을 뷰에 반영한다.

• 업데이트하는 항목에 따라 어떤 부분을 찾아서 변형하는 규칙을 정하는 작업은 애플리케이션 규모가 커질수록 복잡해지고 제대로 관리하지 않으면 성능도 떨어진다.

---

2) 리액트의 등장

• 페이스북 개발 팀은 어떤 데이터가 변할 때마다 어떤 변화를 주는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 고안했다.

• 애플리케이션의 규모와 작성해야 하는 코드의 양도 간단해진다.

  -> 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링하면 되기 때문.

  -> 렌더링: 사용자 화면에 뷰를 보여주는 것.

• 리액트 React: 페이스북 개발팀이 개발한 데이터의 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링하는 방식

---

3) 리액트 이해

• 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다.

• 앞서 말했던 MVC, MVW 등의 프레임워크와 달리 오직 V(view)만 신경쓰는 라이브러리이다.

• 리액트 프로젝트는 특정 부분이 어떻게 생길지 정하는 컴포넌트 선언체가 있다.

  -> 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

---

① 초기 렌더링

• 모든 프레임워크나 라이브러리는 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.

• 리액트에서는 render 함수가 있다.

render( ) {...}

< render( ) 함수 >

• render( ) 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.
• 뷰에 대한 정보를 지닌 객체를 반환한다.
  -> html 형식의 문자열 반환을 하지 않는다.
• 함수 내부에 있는 컴포넌트들이 재귀적으로 렌더링이 가능하다.
  -> 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다.

• 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 문자열 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.

---

② 조화 과정

• 조화 과정 = 뷰를 업데이트하는 과정

  -> 컴포넌트에서 데이터의 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만 사실은 새로운 요소로 갈아끼우기 때문이다.

• 컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render 함수를 또 다시 호출하고 그 데이터를 지닌 뷰를 생성하게 된다.

  -> 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

• 자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.

  

  ---

2. 리액트의 특징

1) Virtual DOM

• 리액트는 Virtual DOM을 사용한다.

• Virtual DOM을 사용하면 실제 DOM을 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. (실제 DOM의 가벼운 사본과 비슷하다.)

< 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트하는 절차 >
① 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
② 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
③ 바뀐 부분만 실제 DOM에 적용한다.

• 리액트와 Virtual DOM는 업데이트의 간결성을 제공한다.

---

2) 기타 특징

• 리액트는 MVC, MVW의 구조를 지향하는 것과 달리 오직 뷰만 담당한다.

• 리액트는 뷰만 담당하는 라이브러리이므로 기타 기능은 직접 구현하여 사용하여야 한다.

  -> 자신의 취향대로 스택을 설정할 수 있다는 장점이 있지마느 여러 라이브러리에 접해야 된다는 단점도 있다.

• 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다.

  ---

3. 리액트의 작업 환경 설정

• 리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치하여야 한다.

• Node.js를 설치하면 Node.js의 패키지 도구인 npm이 설치된다.

• npm 대신 yarn이라는 다른 패키지 관리자 도구도 있다.

  -> yarn은 npm을 대체할 수 있는 도구로 더 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공한다.

---