1장. 왜 리액트를 사용하는가?

안녕하세요. 맹정입니다!

대규모 애플리케이션 중 프론트엔드에서 돌아가는 애플리케이션 구조를 관리하려면 어떻게 해야할까요?

그래서 요즘 많이 쓰는 리액트에 대해서 정리해보고자 합니다.

 

# 왜 리액트인가?

우선 리액트를 알아보기전에, 자주 나올 용어를 정리해봅시다.

---

• Anguler, Vue.js : 이 프레임워크들은 주로
  MVC(Model-View-Controller) 아키텍처, MVVM(Model-View-View-Model) 아키텍처 사용
• React : 자바스크립트 라이브러리로 MVC, MVM 등의 구조가 아닌 오직 V(View) 만 신경 쓰는 라이브러리

잠깐!  MVC, MVVM, MVW 의 구조가 지닌 공통점은 모델과 뷰가 있다는것.
모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 영역

• 컴포넌트 : 다른 프레임워크에서 사용자 인터페이스를 다룰 때, 사용하는 템플릿과는 다른 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 한다.
• 렌더링 : 사용자 화면에 뷰를 보여주는 것

---

그러면, 리액트는 어떻게 데이터가 바뀔때마다 리렌더링 하면서 성능을 아끼고 최적의 사용자 경험을 제공할 수 있을까요? 이것을 파악하려면, 초기렌더링이라는 개념과 리렌더링의 개념을 알아야합니다.

 

• 초기 렌더링 : 어떤 UI 관련 프레임워크, 라이브러리를 사용하던지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요. 리액트에는 render() 함수 존재
  • render() : html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환. 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있는데, render() 함수를 실행하면 그 내부 컴포넌트들도 재귀적으로 렌더링됨

컴포넌트를 실제 페이지에 렌더링하면 분리된 두가지 절차를 따릅니다. 먼저, 문자열 형태의 HTML 코드를 생성 후 특정 DOM에 해당 내용을 주입후 이벤트가 적용됩니다.

• 리렌더링 : 컴포넌트의 데이터 변경으로 다시 실행되는 것 

---

• 조화과정 : 리액트 라이브러리에서 업데이트를 진행할 때, 업데이트 과정을 거친다라기보다는 조화과정을 거친다라고 함. 컴포넌트에서 데이터에 변화가 있을때 우리가 보기에는 변화에 따라 뷰가 변형 되는것처럼 보이지만, 사실 새로운 요소로 갈아끼우는 것임. 이 작업 또한 render() 함수가 맡아서 진행함. 

업데이트를 할때, 값을 수정하는것이 아닌 새로운 데이터를 가지고 render() 함수를 다시 호출합니다. 그리고 그 데이터를 지닌 뷰를 생성 후 결과를 DOM 에 바로 반영하지 않고, 이전에 render() 함수가 만들었던 컴포넌트와 현재 함수와 비교합니다. 비교 후, DOM 트리에 업데이트 합니다.

---

# 리액트의 특징

리액트의 주요 특징 중 하나는 Virtual DOM 을 사용하는 것입니다. 그전에 DOM 이 뭔지 알아보고 갑시다. DOM 은 중요한 내용이니 꼭 알고갑시다.

• DOM : Document Object Model 의 약자로, 객체로 문서구조를 표현하는 방법으로 XML 이나 HTML 으로 작성합니다.

DOM 에 대해서 자세하게 알고싶다면, 다음 글을 참고해주세요. 

2022.11.22 - [CS] - [1일1CS] DOM 은 무엇일까?

[1일1CS] DOM 은 무엇일까?

 

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

리액트에서 데이터가 변화하면 웹 브라우저에  실제 DOM 을 업데이트 할때 다음 세가지 절차를 밟습니다.

1. 데이터를 업데이트 하면, 전체 UI 를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재내용을 비교한다.
3. 바뀐 부분과 실제 DOM에 적용한다.

새로운 DOM 트리가 바로 Virtual DOM 입니다.

그럼 Virtual DOM 을 쓰면 무조건적으로 빠를까? 답은 아닙니다.

답은 적절한 곳에 사용해야 리액트가 지닌 진가를 비로소 발휘할수 있습니다. 리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단한경우에는 리액트를 사용하지 않는 편이 좋습니다. 결론은 리액트와 Virtual DOM 이 언제나 제공 할 수 있는 것은 바로 업데이트 처리 간결성입니다.

---

# 리액트의 기타 특징

이전에도 말했듯이, 일부 웹 프레임워크가 MVC 또는 MVW 등의 구조를 지향하는 것과 는 달리 리액트 라이브러리는 오직 뷰만 담당 합니다. 다른 웹 프레임워크가 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하고 있는 반면, 리액트는 뷰만 신경쓰기에 기타 기능은 직접 구현해서 사용해야 합니다.

하지만, 요즘 다른 개발자들이 만든 라이브러리 예를 들면, 라우팅은 react-router, Ajax 는 Axios 나 Fetch , 상태 관리는 redux 나 Mobx 를 사용하면 되니 걱정하지 맙시다.

---

# Node.js 와 npm 은 무엇일까?

리액트를 사용하시기 전에는, Node.js 를 반드시 설치해 사용해야합니다.

 

• Node.js : Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. 웹 브라우저 환경이 아닌곳에서도 자바스크립트를 사용할 수 있다. Node.js 가 출시 후, 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 활약 할 수 있었음
• npm : Node.js 를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치됨. npm 으로 수많은 개발자가 만든 패키지(재사용이 가능한 코드) 를 설치하고 설치한 패키지의 버전을 관리 할 수 있다.
• yarn : yarn은 npm을 대체할 수 있는 도구로 npm 보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공함.
• git : 형상 관리 도구로 프로젝트 버전을 관리하고 협업을 할때 매우 핵심적인 역할

다음 포스팅에서는 중요한 npm, yarn, npx의 차이에 대해서도 알아보겠습니다.