Judaeng
React 등장 배경 및 개념정리 본문
React란 무엇인가요?
React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다.
React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.
싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
정확히 말하자면 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다.
React를 왜 사용하나요?
React를 사용하지 않아도, HTML과 CSS, JS를 이용해서 웹 페이지를 만들 수 있지만, React를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들 수 있기 때문입니다.
React의 등장 배경(프론트엔드 라이브러리? 프레임워크?)
React는 인기있는 프론트엔드 라이브러리입니다.
하지만 웹사이트를 만드는 것은 사실 프론트엔드 라이브러리의 도움 없이 HTML, CSS를 사용해서 만들 수 있습니다.
단순히 정적 페이지를 만드는 것이라면 JavaScript 없이도 그냥 만들 수도 있습니다.
하지만 여기서 JavaScript를 더해준다면, 유저의 행동 흐름에 따라서 동적으로 화면을 보여줄 수도 있습니다.
정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다.
기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터랙션(Interaction)은 중요하지 않은 요소로 볼 수 있습니다.
이런 경우엔 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있습니다.
반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다.
즉, 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 됩니다.
요즘의 웹은 단순히 웹 페이지가 아니라, 웹 애플리케이션이라고 많이 불립니다.
브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은 것들을 할 수가 있습니다.
어떠한 유저 인터페이스를 동적으로 나타내기 위해서는 정말 많은 상태 관리를 해줘야 하는데 그것을 직접 구현한다는 것은 매우 힘든 작업이 되겠죠?
만약 우리의 프로젝트가 사용자와의 인터랙션이 많지 않다면 프론트엔드 라이브러리는 필요하지 않을 것입니다.
하지만 프로젝트 규모가 커지고, 정말 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는 것은 매우 힘든 일이 될 것입니다. 그렇다고 불가능한 일은 아닙니다. 하지만 번거롭다는 것😑
개발자들이 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다.
자연스러운 유저 인터페이스로 만들어주기 위해서 프론트엔드 라이브러리, 프레임워크가 등장하게 된 것입니다.
대표적으로 Angular, Ember, Backbone, Vue, React 등이 있습니다.
추가++
React는 페이스북이 만들었습니다.
하지만 그 전에도 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했다고 합니다.
해당 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에서 보이게 되는 뷰(View), 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러 (Controller)로 이뤄진 MVC 패턴, 그리고 MVC 에서부터 파생된 MVVM(View Model), MVW(Whatever) 등의 패턴들로 이뤄져 있었습니다.
위에 프레임워크들의 공통점은 모델입니다.
위 프레임워크들의 모델은 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜줍니다.
여기서 핵심은 변화시킨다는 점입니다.
변화라는 것은 상당히 복잡한 작업이라, 특정 이벤트가 발생했을 때 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떤 방식으로 뷰를 업데이트해줄지 로직을 정해주어야 합니다.
페이스북은 React를 만들기 전에 이런 발상을 했습니다.
"Mutation을 하지 말자. 그 대신 데이터가 바뀌면 View를 날려버리고 새로 만들면 되지 않을까?"
그러면 변화를 만드는 복잡한 작업 없이 간단하게 화면이 변경될 것입니다.
하지만, 브라우저가 DOM 기반으로 작동하는 이 페이지를 그때그때 새로운 뷰를 만들어내라고 한다면 성능적인 문제가 발생할 것입니다. 그래서 사용되는 것이 위에서 설명했던 Virtual DOM입니다.
Virtual DOM은 가상의 DOM입니다.
변화가 일어나면, 실제로 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, 자바스크립트로 이뤄진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것입니다.
이 Virtual DOM을 사용함으로써, 데이터가 바뀌었을 때 더 이상 어떻게 업데이트할지를 고려하는 게 아니라, 그냥 일단 바뀐 데이터로 일단 그려놓고 비교를 한 다음에, 바뀐 부분만 찾아서 바꿔주는 것입니다.
Virtual DOM은 DOM변화를 최소화시켜주는 역할을 하는데요, 이 횟수를 최소화시키는 것은 성능적으로 매우 중요한 이슈입니다. 이 이슈에 대한 내용은 아직 제겐 어려운 내용이라고 생각하기에 Pass 하도록 하겠습니다😅
궁금하시다면 직접 찾아보세요ㅋㅋ!
React의 주요 특징 정리
1. Component 기반 구조
React에서는 모든 것이 컴포넌트입니다.
React는 복잡하고 다량의 요소를 가지고 있는 UI를 작고 분리된 코드의 조각인 컴포넌트로 구성하는데, 여기서 컴포넌트란 속성(props)을 입력받아 브라우저에 어떻게 렌더링 할지 정의하는 React의 요소입니다.
말이 어렵지만, 일단 컴포넌트란 UI를 재사용 가능한 조각으로 나눈 것이라 이해하면 될 것입니다.
이렇게 컴포넌트 단위로 개발하게 되면 기능의 재사용성의 증가하여 애플리케이션의 유연성이 높아집니다.
내가 이해한 내용 설명해보기
컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서 UI 개발을 레고라고 가정한다면 컴포넌트는 블록 역할을 하게 되는 것입니다.
이러한 블록을 조립해서 하나의 완성품을 만드는데, 하나의 컴포넌트를 여러 가지 필요한 부분에서 사용할 수 있게 됩니다.
웹 애플리케이션의 모달 창, 버튼 등이 필요하다면, 공통된 하나의 버튼 컴포넌트를 생성하고 그 컴포넌트를 필요한 곳에 가져다 사용하면 됩니다. 이러한 특징은 생산성과 유지 보수를 용이하게 합니다.
하나의 요소 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업에 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있습니다.
2. Data Flow(단방향 데이터 바인딩)
부모 컴포넌트에서 하위 컴포넌트로 전달하는 단순한 데이터 흐름으로, 이해하기 쉽고 데이터 추적과 디버깅이 쉽습니다.
양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가 변경되는 시점에 DOM객체에 렌더링 해주거나, 페이지 내에서 모델의 변경을 감지하여 자바스크립트 실행부에서 변경합니다.
이 방식은 코드의 사용면에서 코드량을 크게 줄여주는 장점이 있지만, 변화에 따라 DOM 객체 전체를 렌더링 해주거나 데이터를 바꾸는 등의 행위로 인해 성능이 감소되는 경우가 생깁니다.
하지만 단방향 데이터 바인딩은 실행부 자체 내에서 데이터의 변화를 감지하지 않으며 데이터에 변화가 오게 되면 특정 함수를 실행시킴으로써 DOM 객체를 갱신합니다. 따라서 데이터 변화에 따른 성능 저하 없이 DOM객체를 갱신해 줄 수 있습니다.
3. JSX(JavaScript + XML)
const element = <h1>Hello, World!</h1>;위에 희한한 태그 문법은 문자열도, HTML도 아닙니다.
JSX라 하며 JavaScript를 확장한 문법입니다.
UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다.
JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다.
JSX는 React “엘리먼트(element)” 를 생성합니다.
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.
이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해 줍니다.
JSX를 통해 우리는 익숙한 HTML 문법과 유사한 JSX를 통해 컴포넌트를 생성할 수 있게 됩니다.
이후 자세한 내용은 여기를 통해 JSX에 대한 내용을 이해하시면 될 것 같습니다.
4. Virtual DOM(Document Object Model)
유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동 원리에 의해 랜더링 과정을 반복하게 됩니다.
Vitual DOM은 이러한 과정에 의해 발생하는 비효율성을 최소화하기 위해 탄생하게 되었습니다.
웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 css를 적용합니다.
그러나 DOM은 동적 UI에 최적화되어 있지 않습니다.
그래서 수많은 데이터를 로딩하고, 이 데이터를 표현하는 요소들이 몇 백, 몇 천 개씩 존재하는 큰 규모의 웹 애플리케이션(트위터나 페이스북과 같은)의 경우 DOM에 직접적인 변화를 주다 보면 성능상의 이슈가 조금씩 발생하기 시작합니다.
브라우저는 HTML을 전달받으면 위와 같은 과정을 통해 페이지에 렌더링 합니다.
한눈에 봐도 많은 과정을 거친다는 것을 알 수 있습니다.
그런데 브라우저단에서 DOM에 변화가 생긴다면 이 모든 workflow가 다시 실행되게 됩니다.
이는 매우 비효율적이며 그러한 이유로 virtual DOM을 사용하게 됩니다.
변화가 생겼을 때 실제 DOM에 접근하여 조작하는 것이 아닌 DOM 작업을 가상화하여 미리 처리한 다음, 최종적인 결과를 한꺼번에 DOM에 전달해 주는 것입니다.
최소한의 돔 조작을 통해 workflow가 다시 실행되지 않도록 처리하는 것입니다.
자세한 내용은 여기를 통해 Virtual DOM을 이해하시면 될 것 같습니다. (물론 저도^^)
유저 인터랙션에 의해 View에 변화가 발생하여 10개의 노드를 수정해 주어야 한다면, 10번의 layout 재계산, 10번의 리렌더링이 필요하다는 것입니다.
Virtual DOM은 변화가 발생하면, 실제 DOM에 적용되기 전에 Virtual DOM에 우선 적용을 시켜봅니다.
실제 DOM에 바로 적용하나, Virtual DOM에 적용하나 같은 연산 비용이 필요할 거라 생각하실 수 있지만, Vitual DOM은 렌더링 과정이 필요 없기 때문에 연산 비용이 실제 DOM보다 적습니다.
Virtual DOM에서 이러한 연산이 끝나고 나면, 최종적인 변화를 실제 DOM에 전달해줍니다.
즉, 10번의 작업을 하나로 묶어 딱 한 번 전달해 줍니다.
물론, 레이아웃 계산과 리 랜더링 하는 과정의 규모는 커지겠지만, 횟수를 줄이는 것으로 충분히 연산 비용을 적게 만들어 줍니다.
또한, Virtual DOM은 어떤 게 바뀌었는지, 어떤 게 바뀌지 않았는지 자동으로 파악하여 필요한 DOM 트리만 업데이트할 수 있게 해 줍니다.
React의 주요 특징은 검색하거나 공식 문서를 보면 여러 가지가 있어서 확정 짓기가 어렵다.
이 외에도 서버 사이드 렌더링을 지원하고, UI 구성 요소를 재사용할 수 있도록 개발할 수 있다는 특징 등이 있다.
나는 리액트에 대해서 계속 공부하고 이해하는 것이 배우는 좋은 방법인 것 같다. 뭐가 꾸준히 나와;
정리하기
✏️React란?
React는 SPA(Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성하는 데 사용되는 오픈 소스 프론트엔드 JS 라이브러리이다. 웹 및 모바일 앱의 Layer를 다루는 데 사용하게 된다.
✏️React의 특징은?
1. Component 기반 구조
2. Data Flow(단방향 데이터 바인딩)
3. JSX(JavaScript + XML) => HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장!
4. Real DOM을 조작하는데 많은 비용이 들어간다는 점을 고려해 리액트는 Real DOM 대신 Virtual DOM을 사용한다.
그 외에도 서버 사이드 렌더링을 지원하고, UI 구성 요소를 재사용할 수 있도록 개발할 수 있다는 특징 등이 있다.
나에게 도움을 주었던 링크들 정리
1. 리액트 공식 문서(React란 무엇인지)
2. 리액트 공식 문서(React 주요 개념, 특징 사용법)
5. 브라우저의 동작 원리
'Develop > React, Redux' 카테고리의 다른 글
| Redux 등장 배경 및 개념정리 (0) | 2021.04.06 |
|---|
