React란❓ 사용 이유❓

React.js란 무엇인가?

 

React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리

보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요함

이렇게 특정 부분을 나누어 개발하는 방법론을 MVC 패턴, MVVM패턴 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리

 

---

React.js의 특징

 

1️⃣ 선언형임
2️⃣ 컴포넌트 기반으로 재사용성이 뛰어남
3️⃣ Virtual DOM(가상돔)기반으로 가벼움
4️⃣ React 컴포넌트는 state와 props을 가짐

 

---

1️⃣ 선언형 Declarative 이란

 

리액트를 하면 자주 접할 수 있는 패러다임은 선언형 Declartive 프로그래밍과 명령형 Imperative 프로그래밍임

funfunStudy/study

리액트는 선언형 성격에 맞게 컴포넌트(원하는 결과, 뷰)를 얻기 위해 <tag></tag> jsx 문법을 통해 구현함

즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않음

(예를 들어 document.createElement나 혹은 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부에 대한 알고리즘을 구현하지 않음)

이와 같은 선언형 특성은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해줌

 

---

2️⃣ 컴포넌트 및 재사용성

컴포넌트는 구현, 명세화, 패키지화, 그리고 배포될 수 있어야 함

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말함

즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법

리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가짐

 

---

3️⃣ Virtual DOM(가상돔)

Virtual DOM 참고자료 👇

Virtual DOM(버추얼 돔,가상 돔)을 직접 만들어보자

가상돔을 이해하기 위해서 In-memory의 개념에 대해 알아두면 좋음

웹 브라우저와 자바스크립트를 동작시키기 위한 V8엔진도 소프트웨어임

즉, 이들이 실행되면 메모리(RAM)가 할당됨

가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말함

만약, 실제 DOM 트리에서 변화가 바로바로 반영된다면 하나의 동작(입력값 변화, 데이터 변화)마다 전체 DOM트리가 변경되어 브라우저 렌더링 과정(HTML 파싱, 렌더 트리 구축, 렌더 트리 배치, 렌더 트리 그리기 등의 과정)이 매번 일어나서 웹 브라우저의 동작에 많은 리소스가 들어가게 됨

 

 

---

4️⃣ State 와 Props

리액트는 내부적으로 State와 Props를 가짐

이는, UI(User Interface)가 사용자의 동작(Actions)에 따라 다른 UI나 Action이 필요하기 때문임

리액트를 잘 다루기 위해서는 이런 State에 대한 이해가 필요함

어떤 컴포넌트를 만들 때, 내부 컴포넌트에 어떤 State가 있을지, 페이지 전체에 어떤 State가 있는지 파악하고 개발을 진행하는 것이 나음

리액트로 UI 개발을 한다면, State와 Props를 어떻게 구성할 것인지를 먼저 파악하고 개발을 하는 것이 좋음

 

---

React 사용 이유

1️⃣ 사용자 경험

웹에서 앱과 같은 사용자 경험을 만들어 줌 

 

2️⃣ 재사용 컴포넌트

중복되는 요소들을 하나로 묶어주기에 유지보수가 좋아짐

 

3️⃣ 데이터-화면 일치

데이터를 화면에 반영할 때 데이터와 화면을 일치시키는 것이 좋아짐