What is React?
React는 지금은 Meta가 된 Facebook이 만든 자바스크립트의 UI 라이브러리이다.
우리는 보통 Angular, React, Vue를 제일 많이 사용하는 자바스크립트 프레임워크라고 알고 있다.
하지만 React 공식문서에는 React는 라이브러리 라고 나와있다.
그러면 라이브러리와 프레임워크의 차이는 무엇일까?
라이브러리 vs. 프레임워크
라이브러리
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임,
즉 특정 기능들을 모아둔 코드와 함수들의 집합이다. 따라서 필요할때마다 사용자가 직접 가져다 쓰는 방식이다.
프레임워크
라이브러리는 우리가 어떤 기능이나 코드가 필요할때마다 가져다 쓰는 방식이지만,
프레임워크는 반제품화된 어떠한 '기반', '구조', '틀'이다.
따라서 이미 정형화된 틀을 우리가 이용하는 것이다.
이것을 제어 역전, IoC(Inversion of Control) 이라고 한다.
IoC (Inversion of Control)
해석하면 '제어의 역전' 이라고 불린다.
이 '제어의 역전'에서 '제어'는 무엇을 의미할까?
바로 어플리케이션의 Flow(흐름)에 대한 제어를 의미한다.
위에서 계속 설명했다시피, 라이브러리는 우리가 필요할때 가져가 쓰는 것이므로 전체 흐름에 대한 코드는 코드를 작성하는 사람이 제어한다.
하지만 프레임워크는 이미 정형화된 틀에 모듈들을 끼워넣는다고 생각하면 된다.
따라서 라이브러리를 사용할 때는 사용자가 흐름의 제어를 관장하지만, 프레임워크를 사용하게 되면 흐름에 사용자가 얹는것이라고 생각하면 된다.
이것을 제어의 역전, IoC 라고 부른다.
Why React?
일단 가장 접근하기 쉬운 이유는 새로고침 없이 페이지 전환 같은 사용자와의 상호작용이 부드럽게 연결된다.
예전 사이트들을 떠올려보면 어떠한 버튼을 누르면 다른 페이지로 이동이 되었다.
하지만 리액트를 사용하면 한페이지에서 유동적으로 사용자와 상호작용이 가능하다.
즉 사용자가 이용하는 '흐름'을 끊지 않을 수 있는 것이다.
이러한 사이트들을 SPA (Single Page Application) 이라고 한다.
재사용 가능한 컴포넌트 생성
또다른 핵심중에 하나는 재사용 가능한 컴포넌트 생성이다.
쿠팡 페이지 식품 카테고리에 들어가면 가장 먼저 있는 상품들을 가져와봤다. (광고 아닙니다)
위 상품들을 보면 제품 사진 빼고는 비슷한 구성을 이루고 있다.
상품 이미지 밑부터 보면 제품명, 정가, 할인된 가격(용량당 가격), 도착 날짜, 별점, 적립금액 순으로 되어있다.
이것을 과연 하나하나 상품마다 구현했을까?
물론 상품마다 다른 값들을 다 넣어가면서 구현을 해도 된다.
하지만 우리가 나타내어질 UI의 틀을 만들고, 안에 들어갈 데이터들을 인자로 넘겨주는 방식으로 하면 훨씬 간단할 것이다.
리액트를 사용하게 된다면, 위에서 설명한 것과 같이 컴포넌트를 만들고 우리가 다르게 표현할 값만 인자로 받아서 제 위치에 넣어주기만 하면 된다.
컴포넌트 분리로 인한 우려사항 분리 (Seperation of Concerns)
"우려사항 분리"
사실 위 문장은 어쩌면 다른 언어, 혹은 이미 본인이 만든 프로젝트나 간단한 코드에서 이미 실행중일 것이다.
제일 간단한 예시가 함수의 분리이다.
한 함수는 확실하게 한 가지의 기능만 하도록 만들어 주는 것이다.
(이것을 SOLID 원칙에서 SRP 라고도 한다)
만약 함수를 분리해주지 않고 main 함수에 모든 로직을 다 집어넣었다고 해보자.
그러면 오류가 발생했다 던가, 로직에 문제가 있다면 코드가 길어질수록 발견하기 쉽지 않을 것이다.
하지만 함수 하나당 한 기능을 맡도록 해놓는다면 우리는 문제가 생긴 기능에 해당하는 함수만 조치하면 된다.
위 두 컴포넌트에 해당하는 설명들은 React 에만 해당하는 것이 아니다.
하지만 React는 컴포넌트 분리를 이용해서 우리가 원할 때 컴포넌트들을 짜맞출 수 있다.
Virtual DOM
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
좀 쉽게 얘기 하자면 그냥 <html>, <body>, ... 등과 같은 HTML을 이루는 태그들의 집합, 또 그 이하에 각 태그들의 속성의 집합 모두를 나타낸 것이라고 생각하면 편하다.
Virtual DOM을 설명하기 전에 예를 들어 다크모드를 생각해보자.
보통 요즈음 웹 페이지 들은 다크모드와 라이트모드로 전환이 가능하다.
단순히 배경은 검정, 글씨는 흰색으로 바뀌는 다크모드가 있다고 해보자.
document.body.style.color = 'white';
document.body.style.background = 'black;
위와 같은 코드가 있다면 계속 색깔이 바뀌는 페이지를 렌더링 하게 될 것이다.
다시 말하자면, 자바스크립트로 DOM의 body의 style에 접근을 해서 색깔을 계속 바꾸고,
바꾸고 난 뒤의 DOM을 다시 렌더링을 해주어서 화면에 보여주는 것이다.
지금 위의 예시는 단순한 작업이지만, 예를 들어 한 버튼의 클릭으로 DOM의 100개의 요소가 바뀐다고 해보자.
그러면 새로운 DOM을 100번 렌더링 해주는 것이다. (예시를 위해 극단적으로 설명했지만 실제로는 그렇지 않을수도 있다.)
현대의 페이지들은 상호작용이 많고, 움직이는 것도 많다.
이렇게 자주 렌더링 하게 된다면 비효율적이고 PC의 자원을 많이 소모하게 된다.
이문제를 해결하기 위해 Virtual DOM이 쓰이는 것이다.
DOM에서 바뀌는 것이 있을때마다 렌더링을 하는 것이 아니라,
DOM을 추상화한 가상의 객체를 메모리에 올려놓는 것이다.
위에서는 DOM을 직접적으로 조작했지만, 그렇지 않고 일단 Virtual DOM을 조작을 한뒤에 DOM과 비교를 하게 된다.
그리고 나서 차이가 있다면 DOM은 Virtual DOM과 비교해서 바뀐 것만 조작을 한다.
따라서 우리 화면에 보여지는 DOM은 딱 한번만 렌더링을 하게 된다.
따라서 리액트를 사용하게 된다면 우리는 끊기는 것 없이 물 흐르듯 자연스레 모양이 바뀌는 SPA (Single Page Application)을 볼 수 있다.
결국에는, React를 사용하게 된다면 우리는 자신만의 HTML 요소를 만들고 결합해서 사용자 인터페이스를 구축할 수 있다.
'Web > React' 카테고리의 다른 글
| React Hooks (0) | 2023.03.05 |
|---|---|
| React & React-Dom (0) | 2022.11.11 |
| JSX (0) | 2022.05.02 |
| 리액트 설치 (0) | 2022.05.02 |