(번역) 리액트 Forget이 useMemo와 useCallback 훅을 완전히 대체하는 방법

원문 : https://dev.to/usulpro/how-react-forget-will-make-react-usememo-and-usecallback-hooks-absolutely-redundant-4l68

리액트 컴포넌트에서 메모이제이션을 자동화하는 리액트 팀의 최신 핵심 기능인 리액트 Forget에 대해 알아봅시다. 리액트 Forget에 대해 알아가면, 더 이상 useMemo와 useCallback을 수동으로 사용할 필요가 없는 웹 개발의 미래를 대비할 수 있습니다. 이에 대한 최신 정보를 확인하고, 효율적인 리액트 컴포넌트를 손쉽게 작성할 준비를 하세요.

목차

• 미래를 엿보다: 리액트 Forget의 등장
• 리액트 Forget: 보다 최적화된 UX와 DX를 위해
• 리액트 Forget의 메커니즘
• 현재 개발 상황 및 향후 계획
• useMemo 및 useCallback의 현재 필요성
  • useMemo의 역할
  • useCallback의 필요성
• useMemo 및 useCallback의 문제점
• 리액트 Forget의 약속
• 결론: 미래를 위한 준비

미래를 엿보다: 리액트 Forget의 등장

"자동으로 메모하는 컴파일러"인 리액트 Forget은 리액트 커뮤니티를 강타한 혁신적인 최신 도구입니다. 2021년 리액트 컨퍼런스에서 공개된 이 컴파일러는 React.useMemo 또는 React.useCallback의 필요성을 감지하여 컴포넌트 리렌더링 성능을 향상시킵니다. 컴파일러는 이러한 구조와 유사한 동작을 하는 코드를 삽입하여 리액트 애플리케이션의 성능을 최적화합니다.

리액트 팀의 핵심 멤버인 Dan Abramov는 리액트 Forget으로 React.memo()가 더 이상 필요하지 않을 수도 있다고 이야기 했습니다. 컴파일러는 useMemo()의 결과를 계산할 뿐만 아니라 컴포넌트가 반환한 결과물인 리액트 엘리먼트 객체도 메모화합니다.

리액트 Forget: 보다 최적화된 UX와 DX를 위해

애플리케이션에서 원활한 UX를 제공하기 위해 개발할 때 메모를 사용하는 경우가 많습니다. 하지만 이렇게 하면 개발자의 정신적인 부담이 증가하여 최적의 DX가 제공되지는 않습니다.

리액트 Forget은 메모이제이션 과정을 자동화하여 이 문제를 완화하는 것을 목표로 합니다. 컴포넌트 수준에서 반응성을 최적화하는 자동 반응 컴파일러가 있는 것과 같습니다. 상태 값이 의미 있게 변경될 때만 애플리케이션이 다시 렌더링되도록 보장합니다.

구현하는 관점에서 보면 자동으로 메모이제이션 하는 것을 의미합니다. 하지만 반응형 구성이 리액트와 Forget을 이해하는 데 더 쉬운 방법인 것 같습니다. 리액트 Forget은 본질적인 리액트의 리렌더링 동작을 변경하는데 객체 식별자의 변경을 감지하는 것에서 런타임에 깊은 비교를 위한 비용을 발생시키지 않고, 실제 값의 변경을 감지하는 것으로 전환합니다.

리액트 Forget의 메커니즘

리액트 Forget의 코어는 바벨과 거의 완전히 분리되어 있으며, 핵심 컴파일러 API는 단순히 이전 AST(abstract syntax tree)를 입력하고 새 AST를 출력하는 방식입니다. 이는 원본 로케이션 데이터를 유지하면서 달성됩니다. 내부적으로 컴파일러는 저수준의 의미 분석을 수행하기 위해 사용자 정의 코드 표현 및 변환 파이프라인을 사용합니다.

현재 개발 상황 및 향후 계획

리액트 어드밴스드 컨퍼런스에서 리액트 Forget의 개발자인 Joe Savona와 Mofei Zhang은 "관용적 리액트의 이해"라는 강연을 통해 프로젝트의 현재 상태와 향후 계획에 대한 인사이트를 제공했습니다.

Joe Savona에 따르면 2023년 현재 리액트 Forget은 여전히 활발하게 개발 중이라고 합니다. 프로젝트가 상당한 발전을 이루었지만 아직 출시할 준비가 되지 않았다고 이야기 했으며, Savona는 대중에게 공개하기 전에 최고 수준의 품질, 문서화, 지원, 버그 수정을 보장하기 위한 팀의 노력을 강조했습니다.

"우리는 품질뿐만 아니라 문서화, 지원, 버그 수정에 있어서도 매우 높은 기준을 가지고 있습니다. 리액트 Forget이 오픈소스인 만큼 좋은 오픈소스 프로젝트가 되기를 바랍니다." - Joe Savona

향후 계획에 대해 논의할 때 Mofei Zhang은 궁극적으로 리액트 Forget을 오픈소스화하는 것이 목표라고 언급했습니다. 그러나 오픈소스 버전의 정확한 출시 날짜는 강연 중에 공개하지 않았습니다. Zhang은 오픈소스 프로젝트로 출시하기 전에 Forget을 최대한 멋지게 만드는 데 집중하고 싶다고 설명했습니다. 품질과 커뮤니티 지원에 대한 높은 기준을 충족하여 오픈소스화 하고싶다는 것이었습니다.

사용법과 관련하여 Joe Savona는 리액트 Forget이 빌드 파이프라인에 통합되도록 설계되었다고 강조했습니다. 리액트의 안정적인 버전에 필수 런타임 API가 포함되면 개발자는 리액트 Forget을 바벨 플러그인으로 설치할 수 있습니다. 이 접근 방식은 리액트 Forget이 기존 리액트 프로젝트와 원활하게 통합될 수 있도록 보장합니다.

Savona와 Zhang은 모두 메타 조직 내에서 Forget을 테스트하고 개선해 왔다는 점을 인정했습니다. 이들은 스트레스 테스트를 위해 많은 수의 개발자와 페이스북의 규모를 사용할 수 있다는 특별한 이점을 가지고 있습니다. 구체적인 채택 지표를 제시하지는 않았지만, 메타에서의 경험을 통해 더 많은 커뮤니티에 도움이 될 수 있는 귀중한 인사이트와 사용 사례를 제공했습니다.

"다음 단계는 메타의 모든 곳에서 Forget이 사용될 때까지 규모를 확장하고 세부적인 부분을 개선하는 것입니다." - Mofei Zhang

useMemo 및 useCallback의 현재 필요성

리액트 Forget의 중요성을 이해하려면 먼저 현재 리액트 생태계에서 useMemo와 useCallback의 필요성을 이해해야 합니다.

useMemo의 역할

useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 리액트 Hook입니다. 캐시하려는 값을 계산하는 함수와 의존성 목록 두 가지 인수를 받습니다. 다음은 useMemo를 사용하는 방법의 예시입니다.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

이 예시에서 useMemo는 TodoList 컴포넌트의 불필요한 리렌더링을 생략하여 성능을 최적화하는 데 도움이 됩니다.

useCallback의 필요성

반면에 useCallback은 콜백 함수의 메모화된 버전(의존성 중 하나라도 변경되었을 때에만 변경되는)을 반환합니다. 참조 값의 동일 여부에 의존하는 자식 컴포넌트에 콜백을 전달할 때 불필요한 렌더링을 방지하기 위해 사용할 수 있습니다.

import { useCallback } from 'react';

function TodoList({ todos, tab }) {
  const handleTodoClick = useCallback(
    (id) => {
      // 클릭 이벤트 처리
    },
    [todos, tab] // 의존성
  );

  // ...
}

이 경우, useCallback은 todos이나 tab이 변경되지 않는 한 모든 렌더링에서 handleTodoClick 함수가 변경되지 않도록 보장하여 불필요한 리렌더링을 방지합니다.

useMemo 및 useCallback의 문제점

useMemo와 useCallback은 성능을 최적화하는 훌륭한 도구이지만 코드에 복잡성을 추가하고 올바르게 사용하기 어려울 수 있습니다. 의존성 배열을 올바르게 지정하지 않으면 혼란스러운 버그와 성능 문제가 발생할 수 있습니다. 또한 이러한 Hook을 사용하면 코드를 읽고 이해하기 어려울 수 있습니다.

리액트 Forget의 약속

리액트 Forget은 메모화 프로세스를 자동화하여 이러한 문제를 해결하는 것을 목표로 합니다. 새로운 컴파일러를 사용하면 개발자가 수동으로 useMemo나 useCallback을 사용할 필요가 없습니다. 대신 컴파일러가 메모화가 필요한 시점을 자동으로 판단하여 적용하므로 개발자의 정신적 부담이 줄어들고 코드를 읽고 이해하기 쉬워집니다.

결론: 미래를 위한 준비

리액트 개발자는 리액트 생태계의 최신 개발과 기능을 계속 업데이트하는 것이 중요합니다. 곧 출시될 리액트 Forget은 매우 획기적일 것이며, 수동으로 메모할 필요 없이 성능 좋은 리액트 컴포넌트를 더 쉽게 작성할 수 있게 해줄 것입니다. 이 새로운 도구가 출시되기를 기대하지만, 현재 사용 중인 useMemo와 useCallback과 같은 도구를 이해하고 숙달하는 것은 여전히 필수적입니다. 그러니 계속 코딩하고 배우면서 곧 출시될 흥미로운 새 기능에 대비하세요!

이 글이 도움이 되었다면 👍 표시를 하고 동료 개발자들과 공유하세요. 더 많은 콘텐츠를 보시려면 트위터에서 저를 팔로우하세요. 또한 지금 바로 적용할 수 있는 새로운 리액트 기능이 궁금하다면 리액트 서버 컴포넌트에 대한 제 글을 확인해 보세요.