React - UI를 위한 JavaScript 라이브러리

들어가며

웹/앱 관련 분야에 계시다면 react에 대해서 많이들 들어보셨을 텐데요.

react는 'UI를 위한 자바스크립트 라이브러리'입니다. SPA(Single Page Application)를 구축하는 데 사용이 됩니다.

 

이번 시간에는 react에 대해서 알아보려고 합니다.

 

React 공식 문서 설명

 

주요 개념부터 알아보자

react를 이해하기 위해서 아래 개념들을 알아둘 필요가 있습니다.

컴포넌트(Component)

react의 핵심은 바로 '컴포넌트'라는 개념입니다. 컴포넌트는 UI에서 독립적이고, 재사용 가능한 부분을 나타냅니다. 각 컴포넌트는 자신의 상태와 로직을 관리합니다.

 

컴포넌트가 클래스로 구성되면 클래스 컴포넌트, 함수로 구성되면 함수 컴포넌트라고 부릅니다.

 

상태(State)와 속성(Props)

state는 컴포넌트 내에서 관리되는 변경 가능한 상태 데이터로, 컴포넌트의 내부 상태를 저장하고 업데이트하는 데 사용됩니다.

 

반면, props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 읽기 전용 데이터로, 컴포넌트 간의 데이터 전달에 사용됩니다. 자식 컴포넌트로부터 부모 컴포넌트로는 데이터를 전달할 수 없습니다.

A 컴포넌트 안에 B 컴포넌트가 있다면 각각 부모, 자식 컴포넌트라고 부릅니다.

 

가상 DOM(Virtual DOM)

react는 가상 DOM이라는 개념을 사용하여 효율적으로 렌더링을 수행합니다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 실제 DOM을 직접 조작하는 것보다 훨씬 빠르게 동작합니다.

 

훅(Hooks)

훅은 함수 컴포넌트에서 react의 기능을 사용하게 해주는 특별한 함수입니다. 상태와 라이프 사이클을 관리하는 등 여러 가지 기능을 가지고 있는 다양한 훅들이 있습니다. 컴포넌트의 top-level에서만 사용 가능하며, 조건문, 루프, 중첩문에서는 사용할 수 없습니다. 가장 일반적인 훅은 useState, useEffect입니다. 

 

어떻게 동작하는 거지?

react의 동작 과정을 간단히 나타내면 다음과 같습니다.

1. 초기 렌더링
   react는 초기 상태의 UI를 나타내는 가상 DOM 트리를 생성합니다.
2. 변경 감지
   컴포넌트의 state나 props가 변경되면, react는 이 변경 사항을 반영한 새로운 가상 DOM 트리를 생성합니다.
3. 동기화
   두 가상 DOM 트리에서의 변경 사항을 계산하고(이를 'Diffing' 또는 'Reconciliation'이라고 합니다), 이 변경 사항을 실제 DOM에 반영하여 실제 DOM과 동기화합니다.

Diffing 알고리즘은 다음과 같이 동작합니다.

1. 요소 유형의 비교
   두 가상 DOM 트리의 루트 요소를 비교합니다. 요소의 유형이 다르면, react는 해당 실제 DOM 노드(및 그 하위 트리)를 제거하고 새 가상 DOM 트리에 해당하는 새로운 실제 DOM 노드를 생성합니다.
2. 속성의 비교
   요소의 유형이 같다면 (e.g. 둘 다 <div>), react는 해당 요소의 속성(attribute)을 비교하여 변경 사항을 업데이트합니다.
3. 목록과 반복 컴포넌트의 처리
   목록 또는 반복되는 컴포넌트에 대해서는 key를 통해 효율적으로 업데이트할 수 있으며, 고유한 key 값으로 요소를 찾아 중복 작업을 줄입니다.

 

도대체 매력이 뭐길래?

react 말고도 angular, vue와 같은 SPA 프레임워크가 있지만 그중에서도 react를 사용하는 이유는 다음과 같습니다.

1. 컴포넌트 기반 아키텍처
   react는 컴포넌트를 기반으로 구성된 아키텍처를 사용합니다. 컴포넌트들을 조합하여 쉽게 새로운 컴포넌트를 만들 수도 있습니다. 이는 코드를 간결하게 만들어주고 유지보수성과 재사용성을 높입니다.
2. 가상 DOM
   react는 가상 DOM을 사용합니다. 가상 DOM은 실제 DOM과 동기화되어 변경 사항을 최소화하고 필요한 부분만 업데이트합니다.
   
3. 단방향 데이터 흐름
   react는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다. 이는 데이터 관리를 예측 가능하고 디버깅이 쉽게 만들어줍니다.
4. 활발한 커뮤니티와 생태계
   react와 관련된 다양한 도구, 라이브러리, 플러그인이 존재하며, 쉽게 정보를 찾고 지원을 받을 수 있습니다.

 

마치며

이번 시간에는 react에 대해서 간단하게 알아봤는데요. 저도 꾸준히 사용은 하고 있지만 겉핥기식으로만 알고 있던 게 많았는데 이번 기회에 이해를 보충할 겸 정리해 봤습니다.

 

react를 이용하면 SPA를 쉽고 효율적으로 개발할 수 있으니 많이들 이용해보셨으면 좋겠습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

Reference

https://react.dev/

https://legacy.reactjs.org/docs/reconciliation.html