React / intro : 리액트란?

리액트란 무엇인가?

들어가기에 앞서 리액트의 등장 배경을 통해 리액트의 필요성을 알아보자.

새로운 기술을 이해하기 위해서는 그 기술이 나오게된 배경을 먼저 이해하는 것이 중요하다.

어떤 배경에서 어떤 문제를 해결하기 위해 만들어 졌는지를 알면 그 기술을 더 쉽게 이해할 수 있다.

 

---

< 리액트의 등장 배경 >

1. Web Application의 발전

상호작용이 적고 단순한 과거의 웹페이지와 달리 현재의 웹페이지는 상호작용이 많고 페이지의 규모 또한 커졌다.

쉽게 말해 예전에는 사용자가 수동적으로 정보를 받는 입장이었다면,

현재의 사용자는 다양한 액션을 취해 다양한 결과를 얻을 수 있게되었다.

 

---

2. 프론트엔드,  프레임워크(Framework)와 라이브러리(Library)의 등장

규모가 커짐에 따라 복잡해진 웹어플리케이션의 개발 생산성을 향상시키고,

유지보수의 편리성을 높이며, 방대한 양의 데이터를 더 쉽게 관리하기 위해 등장했다.

 

 

프레임워크와 라이브러리의 차이점

 

프레임워크(Framework)

정해진 틀 안에서 수동적(자유도가 낮음)으로 개발이 이루어진다.

작업에 필요한 기본적인 기능들을 가지고 있어 편리하다.

(이미 갖춰진 주방, 정해진 조리 도구로만 요리가 가능)

 

라이브러리(Library)

개발자가 직접 필요한 기능을 찾아 능동적으로 사용한다.

프레임워크에 비해 자유도가 훨씬 높다.

(내가 직접 조리 도구를 선택, 하지만 조리 도구를 내가 다 모아야한다.)

 

 

 

프론트엔드에서 가장 많이 사용하는 세 가지

 

React(리액트) : library

Angular(앵귤러), Vue(뷰) : framework

 

 

---

3. React를 사용하는 이유

왜 이미 갖춰진 앵귤러나 뷰같은 프레임워크가 아닌 리액트(라이브러리)를 사용할까?

 

자신만의 고유한 문법을 가진 프레임워크와 달리 리액트는 자바스크립트 문법을 그대로 활용하기 때문이다. 

위의 특징 덕분에 초심자도 비교적 쉽게 접근할 수 있고 자바스크립트에 대한 이해도도 함께 높일 수 있다.

기술이 지속적으로 관리되기 위해서는 수요가 꾸준히 있어야하는데

현재 개발자 커뮤니티에서 가장 활발하게 소통이 오가는 것이 리액트이다.

따라서 방대한 자료량을 보유하고있어 개발자의 입장에서 생산성을 높이기 유리하다.

또한 React Native라는 기술을 통해 웹 뿐만아니라 ios, 안드로이드 기반의 모바일 애플리케이션 개발도 가능하다.

이는 곧 기술의 확장성을 의미함으로 사용하는 개발자들은 꾸준히 증가하고 있다.

 

 

---

< React의 정의 >

위에서 리액트의 등장 배경과 필요성에 대해 알아보았다.

그렇다면 리액트란 무엇일까?

 

리액트는

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

리액트는 virtual DOM을 이용해 화면에 출력되는 UI를 자동으로 업데이트해준다.

 

1. virtual DOM이란? 

가상 돔으로 실제 DOM에 적용되기 전에 가상 돔을 거쳐 페이지 전체를 새로 그리지 않고 변화한 부분만 적용시킨다.

 

브라우저 랜더링 방식에 따라 아래와 같은 과정을 거친다.

DOM 요소에 변화 → 렌더 트리(DOM 트리&CSSOM 트리) 다시 그리기 → 레이아웃 위치 계산 → 화면에 다시 그린다. (화면 전체를 다시 그려내야함 ⇒ 시간이 소요됨)

 

 

가상 돔(virtual DOM)을 이용할 경우

DOM 요소에 변화 → 가상 돔에서 기존의 UI를 가지고 있으면서 변화한 부분만 계산(DOM전체 연산 양이 줄어든다) → 변경 사항만 화면에 다시 그린다. ⇒ 최소한의 시간으로 더 효율적으로 처리

 

 

2. 리액트의 장점

 

선언적 개발이 가능하다.

 

절차적 프로그래밍

“어떻게”에 집중 → 바닐라자바스크립트 (DOM을 직접 조작)

 

선언적 프로그래밍 

“무엇을”에 집중 → 리액트 (DOM 조작을 리액트가 알아서 해줌)

view에만 초점을 맞춰서 선언하는 방식으로 “어떻게”는 리액트가 알아서 처리한다.

⇒ 훨씬 효율적이다.

 

---

이어지는 다음 글에서는 리액트 사용을 위한 기본적인 환경에 대해 다룹니다.

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!