[React] React.js란 무엇인가?

 

React.js란 무엇인가?

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

 

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

 

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

개발을 처음 공부한다면 MVC 패턴, MVVM패턴 외에 다양한 패턴들을 익히고, 손으로 직접 구현해보길 바란다. 다양한 패턴들이 처음에는 익숙하지 않지만 가끔 어떤 문제를 해결하거나 어떤 개념을 이해할 때 유용한 경우가 있다.

React.js의 특징

React.js를 처음 배우면 React.js의 특징으로 다음과 같은 말을 볼 수 있다.

 

01. React는 선언형이다.
02. React는 컴포넌트 기반으로 재사용성이 뛰어나다.
03. React는 Virtual DOM(가상돔)기반으로 가볍다.
04. React 컴포넌트는 state와 props 을 가진다.

 

우리는 여기에서 다음의 키워드를 얻을 수 있다. 선언형(Declarative), 컴포넌트(Component), 재사용성(Reusable), Virtual DOM(가상돔).

 

내 생각에 React.js의 본질은 위의 키워드로 모두 설명할 수 있다. 각 키워드들에 대해서 알아보자.

 

01. 선언형 Declarative 이란

소프트웨어 공학에서 자주 접하게 되는 개념은 패러다임(Paradigm)이다. 즉, 프로그래밍을 어떻게 할 것인가 하는 생각에 대한 논의가 활발하게 이루어진다.

 

이 중 리액트를 하면 자주 접할 수 있는 패러다임이 선언형 Declartive 프로그래밍과 명령형 Imperative 프로그래밍이다. 이 둘의 차이점에 대한 설명은 좀 더 잘 설명된 글 링크를 남기며, 리액트의 선언적 성격을 보도록 하자.

 

리액트는 선언형 성격에 맞게 컴포넌트(원하는 결과, 뷰)를 얻기 위해 <tag></tag> jsx 문법을 통해 구현한다. 즉, jsx를 얻기 위한 알고리즘에 대한 구현을 하지 않는다. (예를 들어, document.createElement나 혹은 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부에 대한 알고리즘을 구현하지 않는다.)

 

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

 

02. 컴포넌트 및 재사용성

내가 처음 웹 개발 공부를 시작했을 때(2019년 3월 1일) HTML, CSS, Javascript를 공부하고 웹 사이트를 만들었을 때, 하나의 화면을 구현하는데에 엄청 많은 요소들을 복사, 붙여넣기를 해야하는 문제를 겪었다.

 

리액트를 쓰는 지금은 컴포넌트(Component)라는 개념을 통해 작성한 HTML, CSS를 간략하게 <Component/> 와 같은 식으로 쓸 수 있다. 리액트를 쓰게되며 가장 편리하다고 느끼는 점이다.

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

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.

 

03. Virtual DOM(가상돔)

처음에 나는 Virtual DOM이라는 말이 이해가 가지 않았다. <Virtual DOM(버추얼 돔,가상 돔)을 직접 만들어보자>라는 글을 읽고 document.createElement 라는 웹 API를 통해 가상돔에 대해 조금 이해가 되었다.

 

가상돔을 이해하기 위해서 In-memory의 개념에 대해 알아두면 좋습니다. 웹 브라우저와 자바스크립트를 동작시키기 위한 V8엔진도 소프트웨어입니다. 즉, 이들이 실행되면 메모리(RAM)가 할당이 된다.

 

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

 

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

 

04. State 와 Props

리액트는 내부적으로 State와 Props를 가진다. 이는, UI(User Interface)가 사용자의 동작(Actions)에 따라 다른 UI나 Action이 필요하기 때문이다.

 

리액트를 잘 다루기 위해서는 이런 State에 대한 이해가 필요하다. 어떤 컴포넌트를 만들 때, 내부 컴포넌트에 어떤 State가 있을지, 페이지 전체에 어떤 State가 있는지 파악하고 개발을 진행하는 것이 낫다.

 

해당 부분은 최근에 느끼는 스스로의 한계였다. 페이지 단위에서 State가 복잡하지만 이를 파악하지 않고 바로바로 코딩을 했었다. 이로 인해 새로운 기능이 추가되거나, 변경 사항이 수정될 때 중복되는 구조가 생기고 이로 인해 코드가 복잡해지는 일이 생긴다.

 

리액트로 UI 개발을 한다면, State와 Props를 어떻게 구성할 것인지를 먼저 파악하고 개발을 하도록 하자.

 

 

출처 : medium.com/react-native-seoul/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A5%BC-%EC%B2%98%EC%9D%8C%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-01-react-js%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-ad8ba252ee28