[세미나] 왜 리액트인가?

사내에서 진행했던 세미나 발표 자료, 스크립트 정리

0. 왜 리액트인가?

오늘 주제는 "왜 리액트인가?"입니다.

 

리액트는 웹 개발에서 가장 인기 있는 기술 중 하나로, 전 세계의 수많은 개발자들과 기업들이 선택하고 있는 기술입니다. 2024년 스택오버플로우 개발자 조사에 따르면, 지난 1년 동안 어떤 웹 프레임워크와 웹 기술로 광범위한 개발 작업을 했으며, 내년에 어떤 작업을 하고 싶으신가요? 라는 설문에서 약 40%가 React를 선택했습니다.

 

2024년 뿐만 아니라, 리액트는 등장 이후로 꾸준히 순위가 증가하여, 현재까지도 높은 순위를 유지하고 있습니다.

이런 통계는 리액트가 단순히 유행으로 많이 사용되었던 것이 아니라, 현재까지도 발전하며 많은 사람들에게 사용되고 있다는 것을 보여줍니다. 따라서 오늘 발표에서는 리액트가 왜 이렇게 중요한 기술로 자리 잡게 되었는지, 그 특징과 함께 알아보고 앞으로의 미래 전망에 대해서도 살펴보도록 하겠습니다.

1. 리액트란?

 

리액트란 사용자 인터페이스(UI)를 구축하는 데 사용되는 자바스크립트 라이브러리입니다.

 

2011년, 페이스북에서 사용자 인터페이스의 복잡성을 해결하기 위해 개발되었으며, 이후 다양한 프로젝트에서도 성공적으로 사용되면서 2013년부터 오픈소스로 공개되었습니다.

 

리액트를 처음 접했을 때, 리액트의 파란색 원자 모양 로고와 리액트라는 이름이 너무 잘 어울리고 멋지다고 생각했는데요. 이러한 리액트의 로고는 원자 구조와 유사하게 생겼는데, 실제로 리액트가 개발된 메타(구 페이스북)의 깃허브 이슈에서 개발자 분이 질문한 결과, 리액트라는 이름은 화학 반응(chemical reactions)에 영감을 받아 지어졌고, 로고도 그에 맞춰 원자 모양으로 디자인되었다고 합니다.

(참고: https://reactiver.dev/where-did-the-name-react-come-from/ - Haegul Pyun 님 블로그 포스팅)

 

이 로고와 이름에 대한 이야기를 꺼낸 이유는, 리액트의 핵심 개념과 동작 방식이 이와 유사하기 때문입니다. 화학 반응에서 원자들이 결합하여 더 큰 분자를 이루듯, 리액트에서도 '컴포넌트'라는 작은 단위로 UI를 나누고, 이를 조합하면서 전체 화면을 구성해 나가는 방식으로 동작합니다.

 

이러한 배경을 바탕으로, 컴포넌트를 비롯해 리액트를 이루는 핵심 개념들에 대해 알아보겠습니다.

2. 리액트의 핵심 개념

2.1 컴포넌트

컴포넌트는 리액트를 이루는 가장 기본적인 단위로, 독립적이고 재사용 가능한 UI 요소를 의미합니다.

 

마치 레고 블록처럼, 각 컴포넌트는 독립적으로 존재하며, 이들을 조합해 더 큰 컴포넌트를 만들고, 이러한 컴포넌트들이 모여 하나의 복잡한 애플리케이션을 형성합니다.

 

리액트 컴포넌트는 크게 클래스형과 함수형으로 나뉩니다. 클래스형은 자바스크립트의 클래스 문법을 사용하여 정의되고, 리액트 초기에서 많이 사용되었던 전통적 방식입니다. 클래스에 대한 문법을 알고 있어야 하기 때문에 다소 복잡하고 어려울 수 있습니다. 반면 함수형은 간단한 함수를 통해 UI를 만들 수 있고, 가독성이 높아 현재 리액트에서 많이 사용되는 기본 방식입니다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

간단한 함수형 컴포넌트의 예시입니다. 이름을 매개변수로 받아 인사와 함께 출력하는 컴포넌트입니다. 간단한 예시이지만, 함수와 유사한 형식으로 명확하고 간단하게 UI 구성 요소를 생성할 수 있다는 것을 확인할 수 있습니다.

 

리액트 컴포넌트의 핵심 장점은 재사용성입니다.

예시를 보면, 컴포넌트를 사용하지 않았을 경우에는 각 프로필 카드가 개별적으로 작성되어 있어, 이름과 직업이 있는 동일한 구조를 반복적으로 작성하고 있습니다. 이 때, 프로필 카드라는 컴포넌트를 사용하면, UI 변경이 필요할 때 하나의 컴포넌트만 수정하면 전체 애플리케이션에 동일한 변경을 적용할 수 있습니다. 이는 개발 속도를 높이고, 코드의 일관성을 유지하는 데 큰 도움이 됩니다. 이로 인해 훨씬 간결하게 코드를 작성할 수 있고, 유지보수하기가 쉬워집니다.

2.2 Props

Props는 부모-자식 컴포넌트 간에 데이터를 전달하는 방법입니다.

이 때 중요한 점은, Props가 부모에서 자식 방향으로만 흐른다는 점입니다. 이를 단방향 데이터 흐름이라고 합니다. 리액트에서는 이 단방향 데이터 흐름을 중요시합니다. 왜냐하면 단방향 데이터 흐름을 유지하면 데이터가 한 방향으로만 전달되기 때문에 데이터 변경이 어디에서 발생했고 어떻게 흘러가는지 더 쉽게 추적할 수 있기 때문입니다. 이러한 방식은 복잡한 애플리케이션에서도 여러 값에 대한 관리를 쉽게 할 수 있도록 돕고, 디버깅을 쉽게 만듭니다.

import React from 'react';

function WelcomeMessage(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <WelcomeMessage name="jw" />
    </div>
  );
}

export default App;

 

위 예제에서 props는 name="jw"라는 형태로 부모 컴포넌트에서 자식 컴포넌트로 전달되어 환영 메세지를 출력하는 UI를 형성합니다.

여기서 중요한 점은, 이렇게 전달된 Props는 불변값이기 때문에 자식 컴포넌트에서 직접 수정할 수 없다는 점입니다.

이러한 특징으로 인해 props는 위의 프로필 카드 예제처럼, 동일한 구조를 가진 UI를 재사용하여 구성할 때 주로 사용됩니다. 전달하는 props값에 따라 구조는 동일하지만 내용만 다른 UI 요소들을 쉽게 구성할 수 있기 때문입니다. 이를 통해 애플리케이션의 상태를 예측 가능하고 일관되게 유지할 수 있습니다. 이는 리액트가 대규모 애플리케이션에서도 복잡한 컴포넌트와 데이터들을 효울적으로 관리할 수 있는 장점 중 하나입니다.

2.3 상태 (State)

State는 리액트 컴포넌트 내에서 관리되는 동적인 데이터를 의미합니다. 이는 단순히 변하는 데이터를 저장하는 것뿐만 아니라, 컴포넌트의 상태를 관리하고, 그에 따라 UI를 자동으로 업데이트하는 중요한 역할을 하는 특별한 변수입니다.

 

State는 특히 동적 데이터와 UI의 현재 상태를 관리하는 데 사용되며, 예를 들어 사용자가 입력하는 폼 데이터나 드롭다운 메뉴의 열림/닫힘 상태, 모달 창의 표시 여부, 사용자가 선택한 탭과 같은 UI의 현재 상태를 저장하고 관리할 때와 같은 경우에서 State가 주로 사용됩니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={incrementCount}>Click me</button>
    </div>
  );
}

export default Counter;

 

위 예제는 사용자가 버튼을 클릭할 때마다 count라는 State 값이 증가하고, 그에 따라 UI가 자동으로 업데이트되는 간단한 카운터 컴포넌트입니다. State가 중요한 이유는, 위처럼 state로 선언된 상태가 변경될 때마다 리액트가 자동으로 UI를 업데이트하여, 사용자의 입력이나 이벤트에 즉각적으로 반응할 수 있는 인터랙티브한 경험을 제공하기 때문입니다. 이는 리액트의 큰 장점이자 핵심적인 기능 중 하나입니다.

또한, State는 리액트 애플리케이션의 성능과 렌더링 효율성에 직접적인 영향을 미칩니다. State가 변경될 때마다 리액트는 해당 컴포넌트와 그 자식 컴포넌트를 다시 렌더링하기 때문에, 불필요한 렌더링을 줄이고 관리하는 것이 애플리케이션의 성능을 좌우할 수 있습니다. State를 잘 관리하는 것은 리액트에서 최적화된 성능을 유지하는 데 가장 중요한 요소 중 하나입니다.

2.4 가상 DOM

가상 DOM은 리액트가 UI를 효율적으로 업데이트하고 성능을 최적화하는 데 사용되는 핵심 기술 중 하나입니다.

 

DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 방식입니다. 쉽게 말해, HTML로 작성된 웹 페이지를 트리 모양의 구조로 변환하여 컴퓨터가 이해하고 조작할 수 있게 만든 것입니다. 이 트리 구조에서 각 HTML 요소는 노드라고 불리며, 자바스크립트를 사용해 이 노드들을 조작하여 화면의 내용을 변경할 수 있습니다.

 

하지만 DOM 조작은 성능상 비용이 많이 드는 작업입니다. 브라우저가 DOM을 다시 그리는 데는 많은 리소스가 필요하고, 특히 대규모 애플리케이션에서는 이러한 작업이 성능 저하를 일으킬 수 있습니다. 리액트는 이러한 문제를 해결하고, UI를 효율적으로 다루기 위해 가상 DOM을 도입했습니다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, 메모리에 존재하는 자바스크립트 객체입니다.

 

가상 돔의 동작 과정에 대해 간략하게 알아보겠습니다.

1. 컴포넌트에 변화가 일어나면, 모든 변화를 감지하고 이를 모읍니다.
2. 두번째로는 상태 변화를 실제 DOM 대신 가상 DOM에 먼저 적용시킵니다. 리액트는 항상 이전 상태의 가상 DOM과 변경된 부분을 담음 새로운 가상 DOM을 가지는데, 이를 통해 이전 상태와 새로운 상태를 비교할 수 있습니다.
3. 이후 가상 DOM과 이전의 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 방식으로 동작합니다.

이 과정에서 리액트는 여러 변경 사항을 한 번에 모아서 처리하고, 모든 부분이 아니라 바뀐 부분만 감지하여 변경시키기 때문에 불필요한 DOM 조작을 최소화할 수 있고, 성능을 크게 향상시킬 수 있게 됩니다.

3. 리액트의 특징과 장점

지금까지 리액트의 핵심 개념들을 살펴보았습니다. 이제, 리액트가 현대 웹 개발에서 어떤 영향을 주었고, 왜 현대 웹에서 중요한 기술로 자리 잡았는지 그 특징과 장점을 통해 알아보겠습니다.

3.1 사용자 경험(UX) 향상

사용자 경험은 현대 웹에서 점점 더 중요한 부분을 차지하고 있습니다. 리액트는 가상 DOM을 통해 사용자가 빠르고 즉각적인 반응을 경험할 수 있게 하고, 컴포넌트 기반 설계 덕분에 디자인이 일관적으로 유지되어 사용자에게 익숙한 환경을 제공합니다. 또한, Single Page Application(SPA) 구조를 통해 한 페이지 내에서 다양한 콘텐츠를 빠르게 전환할 수 있어, 웹이 끊김 없이 자연스럽게 느껴지도록 합니다. 이러한 이유로, 리액트는 사용자 경험을 크게 향상시키는 장점이 있습니다.

3.2 대규모 데이터와 성능 최적화

현대 웹 애플리케이션은 점점 더 복잡해지고, 다루어야 할 데이터와 정보의 양도 폭발적으로 증가하고 있습니다. 이에 따라 성능을 최적화하는 것이 무엇보다 중요해졌습니다. 리액트는 가상 DOM과 같은 기술을 통해 필요한 부분만 효율적으로 업데이트할 수 있으며, React.memo나 코드 스플리팅 등의 기능을 이용해 자주 일어나는 렌더링을 저장하거나, 코드를 분할하여 필요한 부분만 로딩하는 등 다양한 성능 최적화 기능을 제공합니다. 이러한 덕분에 리액트는 대규모 애플리케이션에서 특히 유용하며, 현대 웹 개발에서 중요한 기술로 자리 잡고 있습니다.

3.3 넓은 생태계와 커뮤니티

리액트는 등장 이후로 많은 시간이 흐르고, 전 세계의 많은 개발자들이 배우고 사용함에 따라 수많은 라이브러리와 도구들이 생겨나게 되었습니다. 또한, 지속적으로 업데이트되면서 최신 기술에 대해서도 빠르게 대응하고 있고, 교육 자료나 사용자 간의 커뮤니티도 활발합니다. 아무리 좋은 기술이여도, 개발하면서 부딪히는 어려움에 해결할 방법이나 정보가 없을 때 막막했던 경험이 모두 있으실 것입니다. 리액트는 방대한 커뮤니티와 자료 덕분에 이런 문제를 빠르게 해결할 수 있고, 이는 개발자들이 리액트를 선택하는 데 큰 장점으로 작용한다고 생각합니다.

4. 리액트의 미래

React Conf 2024

 

지난 5월에 개최된 2024년 리액트 컨퍼런스에서는 리액트의 현재와 미래에 대해 소개했습니다.

 

컨퍼런스의 주요 내용에 따르면 새로운 버전인 React 19에서 UI의 응답이 더욱 향상되었고, 서버와 효율적으로 동작할 수 있는 useOptimistic()과 서버 컴포넌트등의 기술들이 도입되었습니다. 또한 코드를 자동화하고 성능을 개선하는 리액트의 컴파일러가 오픈소스로 공개되어, 더 많은 개발자들이 경험해 볼 수 있을 것이라 발표했습니다. 또한 리액트의 개발자는 향후 10년 간에도 충분히 발전을 지원할 준비가 되어 있으며, 앞으로도 점진적으로 리액트를 확장해 나갈 것이라고 밝혔습니다.

 

이러한 내용들로 보았을 때, 수많은 웹 기술의 변화 속에서도, 리액트는 아직 많은 사람들에 의해 업데이트 되고 상황에 맞게 점차 발전해 나가고 있기 때문에 앞으로의 미래에도 웹 개발의 중심 기술로서 영향을 발휘할 것이라고 예상할 수 있습니다.

 

https://www.frontoverflow.com/magazine/8/React 컨퍼런스와 관련하여 더 자세한 내용은 아래에서 확인하실 수 있습니다.

React Conf 2024 (Day 1) - FrontOverflow

5. 마무리

 

지금까지 리액트의 핵심 개념, 특징과 장점을 통해 현대 웹 개발에서 리액트가 많이 사용되는 이유를 알아보았습니다. 정리하자면, 리액트는 컴포넌트 기반 설계로 재사용성과 유지보수성을 높이고, 가상 DOM과 최적화된 성능으로 빠른 사용자 경험을 제공합니다. 또한, 풍부한 생태계와 커뮤니티를 통해 안정적인 개발 환경을 제공합니다. 이러한 특징을 통해 리액트가 왜 선택되고 널리 사용되는지 알 수 있습니다. 리액트는 앞으로도 계속 발전할 것이고 지금처럼 웹 개발의 핵심 기술 중 하나로 자리를 유지할 것이라고 예상합니다.