프론트엔드 개발자라면 최근 돌아가는 상황을 보며 현기증을 느끼셨을지도 모르는데요.

리액트는 버셀(Vercel)과 너무 밀착되었다는 비판을 듣고 있고, 앵귤러는 중년의 위기를 겪듯 변신을 시도하고 있으며 매주 새로운 프레임워크가 쏟아지고 있습니다.

이런 혼란 속에서 가장 극적인 드라마를 쓰고 있는 주인공이 바로 ‘리믹스(Remix)‘입니다.

최근 리믹스 팀이 발표한 내용은 단순한 버전 업그레이드가 아니라, 웹 개발의 패러다임을 뒤집으려는 거대한 도박에 가까운 이야기였습니다.

리믹스의 역사를 잠깐 짚어보면 정말 파란만장했는데요.

2020년 10월 처음 출시되었을 때는 개인 사용자에게 250달러를 받는 유료 프레임워크로 시작했습니다.

그러다 2021년에 투자를 받으면서 오픈소스로 전환했고, 이후 쇼피파이(Shopify)에 인수되면서 탄탄대로를 걷나 싶었죠.

그런데 최근 ‘리믹스’라는 이름이 사라질 위기에 처했었습니다.

리믹스 팀이 자신들이 가진 최고의 기능들을 ‘리액트 라우터 v7’에 통합시키겠다고 발표했기 때문인데요.

실제로 현재의 리액트 라우터는 단순한 라우팅 라이브러리를 넘어, 데이터 로딩과 액션까지 처리하는 강력한 도구가 되었습니다.

그렇다면 여기서 당연히 이런 의문이 생길 수밖에 없는데요.

“리액트 라우터가 리믹스가 되었다면, 도대체 리믹스 브랜드는 어떻게 되는 거지?“라는 질문입니다.

바로 이 지점에서 리믹스 팀은 ‘버전 3’를 통해 완전히 새로운 정체성을 선언했습니다.

Remix v3는 더 이상 리액트 기반의 메타 프레임워크가 아닙니다.

그들은 리액트와의 결별을 선언하고, 자신들만의 독자적인 길을 걷기로 결정했습니다.

이번 발표의 핵심은 ‘탈(脫) 리액트’라고 요약할 수 있는데요.

Remix v3는 리액트 위에 얹혀가는 껍데기가 아니라, 처음부터 다시 설계된 완전히 새로운 자바스크립트 프레임워크입니다.

그들은 리액트의 복잡한 추상화 계층이나 번들러의 마법 같은 설정들에 의존하지 않기를 원했습니다.

대신 ‘프리액트(Preact)‘를 기반으로 하거나 아예 의존성 없이 가볍고 빠른 웹 표준 기술을 지향하고 있습니다.

가장 충격적인 변화는 바로 상태 관리 방식에서 드러나는데요.

우리가 리액트를 쓰면서 숨 쉬듯이 사용하던 ‘useState’나 ‘useEffect’ 같은 훅(Hook)이 Remix v3에는 존재하지 않습니다.

대신 정말 오랜만에 들어보는 그 이름, 바로 ’this’ 키워드와 ’this.update()’ 메서드가 등장했습니다.

이게 무슨 퇴보냐고 생각하실 수도 있겠지만, 여기에는 아주 명확한 철학이 담겨 있습니다.

리액트 개발자들은 프레임워크가 언제 렌더링을 할지 결정해 주는 것에 익숙해져 있는데요.

우리가 setState를 호출하면 리액트가 알아서 변경 사항을 모으고 스케줄링해서 화면을 업데이트해 줍니다.

하지만 앱이 복잡해지면 이 자동화된 프로세스가 오히려 발목을 잡는 경우가 많습니다.

원하지 않는 재렌더링이 발생하거나, 왜 업데이트가 안 되는지 디버깅하느라 밤을 새우기도 하니까요.

Remix v3는 이 주도권을 다시 개발자에게 돌려주겠다는 건데요.

변수를 수정한다고 해서 화면이 자동으로 바뀌지 않고, 개발자가 명시적으로 this.update()를 호출해야만 화면이 갱신됩니다.

이는 “마법을 줄이고 명시적인 코드를 작성하자"는 의도입니다.

코드가 훨씬 직관적으로 변하고, 프레임워크가 뒤에서 몰래 무슨 짓을 하는지 걱정할 필요가 없어지는 것이죠.

컴포넌트를 만드는 방식도 리액트와는 사뭇 다른데요.

여전히 함수형 컴포넌트를 사용하지만, 상태가 필요한 컴포넌트와 그렇지 않은 컴포넌트를 명확하게 구분합니다.

단순히 JSX를 반환하는 함수는 ‘상태가 없는(Stateless)’ 컴포넌트입니다.

반면에 상태 관리가 필요한 컴포넌트는 ‘JSX를 반환하는 함수를 반환하는 함수’ 형태로 작성해야 합니다.

이렇게 하면 클로저를 통해 상태를 유지하면서도, 클래스형 컴포넌트처럼 this 컨텍스트를 활용할 수 있게 됩니다.

이런 급진적인 변화를 선택한 가장 큰 이유 중 하나는 바로 ‘인공지능(AI)‘인데요.

리믹스 팀은 앞으로의 개발 환경에서 LLM(거대 언어 모델)이 코드를 작성하는 비중이 커질 것이라고 예측했습니다.

그런데 현재의 리액트 코드는 너무나 많은 추상화와 암시적인 규칙들로 가득 차 있습니다.

AI가 문맥을 파악하고 완벽한 코드를 짜내기에 리액트의 복잡도는 꽤나 높은 장벽이었던 것이죠.

그래서 Remix v3는 ‘모델 우선(Model-first) 개발’을 핵심 원칙으로 삼았는데요.

AI가 코드를 더 쉽게 이해하고 생성할 수 있도록, API를 단순화하고 명시적으로 바꾼 것입니다.

변수 할당과 명시적인 업데이트 호출 방식은 AI가 추론하기에 훨씬 쉬운 구조입니다.

이미 앵귤러를 비롯한 다른 프레임워크들도 이런 흐름을 타고 있는데, 리믹스는 아예 구조 자체를 AI 친화적으로 뜯어고친 셈입니다.

또한 Remix v3는 웹 표준 API에 대한 집착에 가까운 애정을 보여주는데요.

브라우저에 이미 내장된 AbortSignal이나 CustomEvent 같은 기능들을 적극적으로 활용합니다.

우리가 리액트 생태계에 갇혀서 잊고 지냈던, 브라우저 본연의 강력한 기능들을 다시 꺼내 든 것입니다.

이는 별도의 무거운 라이브러리 없이도 가볍고 빠른 애플리케이션을 만들 수 있다는 자신감이기도 합니다.

물론 백엔드 기능도 놓치지 않았는데요.

리믹스라는 이름답게 강력한 풀스택 기능을 제공하며, 리액트 서버 컴포넌트(RSC)의 대안이 될 만한 자체적인 서버 렌더링 기술을 탑재했습니다.

클라이언트에서 서버로 요청을 보내면, 서버가 HTML 조각을 보내주고 이를 통해 부분적으로 돔(DOM)을 업데이트하는 방식입니다.

복잡한 설정 없이도 서버와 클라이언트를 오가는 데이터 흐름을 아주 매끄럽게 처리할 수 있습니다.

하지만 모든 것이 장밋빛인 것만은 아닌데요.

아직 이 모든 기능은 개발 중인 단계이며, 당장 npm install로 설치해서 써볼 수 있는 상태가 아닙니다.

공식 문서도 완벽하지 않고, 우리가 본 것은 데모 영상과 초기 프로토타입 수준입니다.

리액트 생태계가 가진 거대한 라이브러리 지원을 포기하고, 맨땅에서 다시 시작해야 한다는 점도 큰 리스크일 수 있습니다.

그럼에도 불구하고 이 도전이 흥미로운 이유는 명확한데요.

현대 웹 개발이 너무 비대해지고 복잡해졌다는 문제의식에 많은 개발자가 공감하고 있기 때문입니다.

리액트는 훌륭하지만, 때로는 너무 많은 것을 알아야 하고 너무 많은 설정이 필요합니다.

“더 가볍고, 더 빠르고, 웹 표준에 가까우면서 AI가 이해하기 쉬운 프레임워크.”

이것이 Remix v3가 우리에게 던지는 승부수입니다.

특히 리믹스의 뒤에는 쇼피파이라는 거대한 기업이 버티고 있다는 점을 주목해야 하는데요.

쇼피파이는 수많은 판매자(벤더)들이 자신의 쇼핑몰을 커스터마이징 할 수 있는 환경을 제공해야 합니다.

이때 AI가 자동으로 코드를 짜주고, 그 코드가 복잡한 리액트 훅 없이도 안정적으로 돌아간다면 어떨까요?

쇼피파이 입장에서는 Remix v3가 자신들의 생태계를 확장할 강력한 무기가 될 수 있는 것입니다.

결국 Remix v3는 단순한 기술적 시도를 넘어선 움직임인데요.

“리액트 천하"라고 불리는 현재의 프론트엔드 시장에 ‘기본으로 돌아가자(Back to Basic)‘는 묵직한 메시지를 던지고 있습니다.

과연 개발자들이 익숙한 useState를 버리고 this.update를 받아들일지는 미지수입니다.

하지만 AI 시대에 맞춰 프레임워크가 어떻게 진화해야 하는지에 대한 하나의 해답을 제시한 것은 분명해 보입니다.

지금 당장 리액트를 버리고 Remix v3를 공부해야 한다고 말하는 것은 아닌데요.

하지만 이들이 보여준 비전, 즉 ‘웹 표준’과 ‘AI 친화적 설계’라는 키워드는 앞으로의 웹 개발 트렌드를 읽는 중요한 단서가 될 것입니다.

프론트엔드 개발자로서 이 새로운 파도가 어디로 흘러가는지 주의 깊게 지켜보는 것만으로도 충분히 가치 있는 일이 될 것입니다.

새로운 소식이 나오면 누구보다 빠르게 다시 정리해서 공유해 드릴 예정입니다.

복잡한 리액트 세상에서 피로감을 느끼셨던 분들이라면, 이번 리믹스의 행보를 한번 주목해 보시는 건 어떨까요?