React의 진화: 클래스 컴포넌트에서 곧 출시될 컴파일러까지

2013년에 Meta가 도입한 React는 프론트엔드 개발을 간소화하고 클래스 컴포넌트 관련 문제를 해결했으며, 다가오는 컴파일 시대를 열었습니다.

### React의 유산: 그 발자취를 되짚어보다
2013년에 Meta에서 선보인 React는 DOM 조작을 간소화하고 단방향 데이터 흐름을 채택하여 개발자가 본질적인 문제 해결에 집중할 수 있게 해준 덕분에 가장 인기 있는 프론트엔드 UI 라이브러리가 되었습니다. React 이전에는 AngularJS 및 Backbone.js와 같은 SPA 프레임워크는 상태 관리와 DOM 조작에 어려움을 겪어 예측 불가능한 코드 동작을 초래했습니다. React의 도입은 직관적인 컴포넌트 기반 코드 구조와 상태 및 데이터를 관리하는 더 간단한 방법을 제공함으로써 이러한 문제를 해결하여 클래스 컴포넌트 시대의 기반을 마련했습니다.

### 리액트 버전의 진화와 클래스에서 함수형 컴포넌트로의 전환
React 버전 1부터 14까지는 건너뛰고 라이브러리가 0.14에서 15로 넘어가면서 성숙하고 안정적이라는 인식에 기여했습니다. 클래스 컴포넌트는 함수형 컴포넌트보다 길고 가독성이 떨어짐에도 불구하고 라이프사이클 메서드 때문에 초기에 많이 사용되었습니다. 내부 로직 재사용의 어려움 등 클래스 컴포넌트의 문제점으로 인해 재사용성과 가독성을 개선하기 위해 함수형 컴포넌트로 전환하게 되었습니다.

### 리액트 기능 구성 요소의 진화와 파이버 엔진의 도입
함수형 컴포넌트에는 처음에는 수명 주기 메서드가 없었지만, 사용효과, 사용상태, 사용컨텍스트, 사용감속기 등의 후크가 도입되면서 이 문제가 해결되고 복잡한 상태 관리가 가능해졌습니다.
버전 16에 도입된 React Fiber 엔진은 작업을 더 작은 단위로 나누어 우선순위를 조정하여 이전 스택 기반 렌더링 접근 방식의 문제를 해결함으로써 React 일정을 혁신적으로 개선했습니다. 이를 통해 보다 효율적인 렌더링과 향상된 사용자 경험을 제공할 수 있었습니다.

### 다가오는 React 컴파일의 시대
다가오는 React 컴파일 시대에는 함수형 컴포넌트에서 useCallback과 useMemo 훅의 번거로운 사용을 해결하기 위해 자동 메모화가 도입됩니다. React 컴파일러는 코드를 자동으로 저장하고 재사용하여 컴포넌트 상태의 변경된 부분만 다시 렌더링함으로써 보다 효율적인 렌더링을 가능하게 하는 것을 목표로 합니다. 이 실험적인 기능은 2021년에 처음 등장했으며, React 애플리케이션의 성능을 크게 향상시킬 수 있는 잠재력을 제공합니다.

### React 컴파일러의 예상 소개
2024년 말에 출시될 예정인 React 컴파일러는 개발자에게 향상된 편의성과 효율성을 제공할 것입니다. 단순성과 신뢰성이라는 원칙을 고수하고 복잡한 문제를 해결하며 개발자가 목표에 집중할 수 있게 해준다는 점에서 그 수명이 길어지고 있습니다. React 컴파일러는 코드 작성을 간소화하고 개발자의 전반적인 신뢰성을 향상시킬 것으로 기대됩니다.

### React의 진화: 클래스 컴포넌트에서 다가오는 컴파일의 시대까지
* 🌐 2013년 React가 탄생하기 전에는 JavaScript와 웹 API가 크게 발전하면서 **다중 페이지 애플리케이션(MPA)에서 단일 페이지 애플리케이션(SPA)으로 전환**되는 등 보다 동적인 웹 애플리케이션을 만들 수 있었습니다.
* ⚛ React는 더 간단한 DOM 조작을 위한 **JSX**와 더 쉬운 상태 관리를 위한 **단방향 데이터 흐름**을 도입하여 프론트엔드 개발에 혁신을 가져왔습니다.
* 🔄 처음에는 라이프사이클 관리에 필요했던 **클래스 컴포넌트의 시대**는 복잡한 구문, 바인딩 '이것'의 어려움, **상위 주문 컴포넌트(HOC)로 인한 래퍼 지옥**과 같은 문제를 야기했습니다.
* 🎣 React에 훅이 도입되면서(버전 16부터) **함수형 컴포넌트의 한계**가 해결되었고, **사용Effect를 통한 수명 주기 관리**와 **사용State, 사용Context, 사용Reducer를 통한 상태 관리**가 가능해졌습니다.
* 🔧 버전 16에 도입된 **Fiber 엔진(React Fiber)**은 작업을 더 작은 단위로 분할하여 렌더링을 최적화하여 보다 효율적인 스케줄링과 사용자 경험을 개선합니다.
* 🛠 다가오는 React의 컴파일 시대는 **메모화를 자동으로 처리**하여 수동 개입 없이 **컴포넌트 리렌더를 최적화**하고 성능을 개선하는 것을 목표로 합니다.
* 🚀 React의 수명은 개발자가 복잡한 구현 세부 사항보다는 **문제 해결에 집중**할 수 있도록 단순성, 안정성, 개발자의 요구 사항을 해결하기 위한 지속적인 발전에 기인합니다.
* 💬 "React는 개발자가 직면하는 복잡한 문제를 다양한 방식으로 해결하고 사용할 수 있는 도구를 제공했습니다. **개발자는 지루한 작업을 처리하여 문제 해결에만 집중**할 수 있습니다." - Rian, Uteco 6차 프론트엔드 코호트

[10분 테코톡]리안의 리액트의 발자취

우아한형제들의 기술조직 이야기를 전하는 우아한테크입니다.

우아한형제들 https://www.woowahan.com/
우아한테크 Facebook https://www.facebook.com/woowahanTech
우아한형제들 기술블로그 https://techblog.woowahan.com