여러 개발 관련 리서치나 채용 공고를 보아도 이제는 리액트를 활용할 줄 모르면 프론트엔드 개발자라고 말하기 힘든 상황이 되었다.

물론 나도 리액트를 쓸 줄은 알지만, 어느 상황에서 어떻게 써야 잘 쓴다고 할 수 있을지, 단순한 프레임워커가 아니라 엔지니어로 거듭나기 위해서는 더 깊은 이해가 필요하다는 생각이 들어 유데미와 옵시디언을 활용해 꾸준히 공부를 이어나가고 있다.

이번 포스팅을 시작으로 리액트에 대해 나름의 탐구와 고민한 흔적을 남겨보려고 한다.

TL;DR

• 리액트가 무엇인지 알아보자
• 리액트의 핵심 개념에 대해 알아보자

---

리액트란?

The library for web and native user interfaces

공식 문서의 정의에서도 알 수 있듯이, 리액트는 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리이다. 다시 말하면, 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리리이다.

그렇다면, 리액트는 왜 만들어졌고 왜 사용하는 걸까? 공식 문서에 따르면, 전통적인 자바스크립트 애플리케이션에서는 특정 데이터가 변경되었을 때, DOM을 직접 조작하고 업데이트하는 방식으로 사용자 인터페이스를 업데이트한다. 이러한 방식은 복잡한 애플리케이션에서는 유지보수가 어렵고, 버그가 발생하기 쉽다는 단점이 존재한다.

리액트는 이러한 문제를 새로운 방식으로 해결하고자 만들어졌다. "반응하다" 라는 단어의 뜻 그대로, 데이터의 변화에 대해 반응하고 이를 DOM에 더 쉽게 반영함으로써 훨씬 다채로운 웹사이트를 구축할 수 있게 한다.

리액트를 활용하면 자바스크립트만을 사용할 경우에 비해 손이 덜 갈 뿐더러 오류 상황에도 대처할 수 있게 된다.

뿐만 아니라,

• 컴포넌트의 재사용
• 선언형 프로그래밍
  • 해당 컴포넌트를 렌더링하고 DOM에 적용하는 것은 React의 책임
  • 목표로 하는 상태만 정의할 뿐 과정은 리액트가 알아서 파악하고 처리한다
  • IoC (Inversion of Control) : 코드가 주도권을 갖는 전통적인 방식이 아닌, 프레임워크가 주도권을 갖는 방식. 리액트는 컴포넌트의 렌더링과 데이터 흐름 과정을 조절함으로써 IoC의 성격을 갖는다.
• Virtual DOM
• JSX

와 같은 다양한 이점을 제공한다.

📌 Recap

즉, 리액트는 개발자 친화적인 사용자 인터페이스를 빠르고 간편하게 구축할 수 있게 해주는 자바스크립트 라이브러리이다.

Virtual DOM

참고 링크 : Virtual DOM and Internals

Virtual DOM은 UI의 이상적인 또는 "가상"의 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리레 의해 "실제" DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 Recociliation이라고 한다.

즉, 리액트는 실제 DOM을 조작하는 것이 아닌, 가상의 DOM을 조작하고 이를 실제 DOM에 반영함으로써 렌더링 성능을 향상시킨다. 이 과정에서 비교 알고리즘을 사용한다.

비교 알고리즘 (Diffing Algorithm)

리액트는 다음과 같은 두 가지 가정을 기반하여 비교 알고리즘 (Diffing Algorithm)을 구현했다.

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야할지 표시할 수 있다.

루트 엘리먼트가 다른 경우, 이전 트리를 버리고 완전히 새로운 트리를 구축한다. 같은 타입의 DOM element인 경우, 같은 속성은 그대로 두고 다른 속성만 변경을 진행한다.

자식 노드의 경우 재귀적 처리를 통해 reconciliation을 진행한다. 마지막에 자식 노드가 추가되는 경우라면 추가된 노드만 트리에 추가하면 된다. 그렇지 않은 경우 모든 자식 노드를 변경해야 하는데, 이를 해결하기 위해 key 속성을 사용한다.

인덱스로 key를 사용하는 것은 최후의 수단이다. 컴포넌트는 key를 기반으로 업데이트되고 재사용되는데, 만약 key값이 인덱스라면 아이템을 이동하는 경우 곧 key를 변경하게 된다. 결과적으로 컴포넌트의 상태가 예상치 못한 방향으로 꼬이게 된다.

JSX

JSX(Javascript Syntax Extension)는 Javascript를 확장한 문법으로, JS 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해준다.

전통적으로 웹 환경은 페이지의 로직은 자바스크립트 내에서, HTML 안에서는 마크업을 작성하는 방식으로 구성되었다. 그러나 웹이 더욱 인터렉티브해지면서 로직이 내용을 결정하는 경우가 많아졌고, 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 존재하게 된 이유이다.

컴포넌트

컴포넌트는 리액트의 핵심 개념이며, 리액트의 전부라고도 할 수 있다.

리액트에서 컴포넌트란,

• UI 요소 또는 UI의 일부가 어떻게 행동하고 나타나야하는지를 정의하는 재사용 가능하고 독립적인 코드 조각이다.
• 리액트에서 컴포넌트는 가장 기초적인 개념이며, 독립적이고, 특정한 기능을 캡슐화한 모듈로 생각할 수 있다.

그렇다면 왜 컴포넌트가 필요할까?

• 재사용성 마크업, CSS, 자바스크립트 로직을 하나의 "컴포넌트"로 결합할 수 있다. 이를 통해 코드의 재사용성이 높아지고, 유지보수가 쉬워진다.

• 관심사 분리 컴포넌트는 독립적이기 때문에, 다른 컴포넌트에 영향을 주지 않고 개발할 수 있다. 이는 개발자가 컴포넌트를 개발할 때, 다른 컴포넌트를 신경쓰지 않고 개발할 수 있게 해준다.

재사용성과 관심사의 분리는 비단 리액트뿐만 아니라, 프로그래밍 전반적으로도 중요시되는 개념이다. 이를 해결하기 위해 리액트는 컴포넌트라는 개념을 사용한다.

📌 Recap

• 컴포넌트는 UI 요소 또는 UI의 일부가 어떻게 행동하고 나타나야하는지를 정의하는 재사용 가능하고 독립적인 코드 조각이다.
• 컴포넌트는 마크업으로 뿌릴 수 있는 자바스크립트 함수이다.

마무리

내가 원하던 제대로 된 공부를 하는 느낌이다. 스스로 공부하며 궁금한 내용을 끝까지 파헤치고 정리하며 모두 내 것으로 만들어야지!

이번 포스팅을 통해 배운 점

• 리액트는 UI를 구축하기 위한 자바스크립트 라이브러리이다.
• 리액트는 선언형 프로그래밍을 지향한다.
• 리액트는 Virtual DOM과 reconciliation을 통해 렌더링 성능을 향상시킨다.
• 리액트는 컴포넌트라는 개념을 사용해 재사용성과 관심사 분리를 해결한다.

---

참고한 글들

• react.dev
• 콴다 팀블로그 - Declarative React, and Inversion of Control
• [React] Reconciliation이란? (+ virtual DOM, 리액트는 선언적)