스벨트로 리액트 더 깊게 이해하기

다양한 프레임워크 경험이 주는 인사이트

리액트만 사용하면 보이는 세계가 제한적일 수 있습니다. 스벨트 같은 다른 프레임워크도 경험하면, 리액트의 여러 특징과 한계를 더 명확하게 이해하고, 더 세련된 코드 작성법을 터득할 수 있습니다.

리액트와 스벨트의 렌더링 방식 차이

리액트는 컴포넌트의 상태가 변하면 전체 컴포넌트 함수가 재실행됩니다. 그래서 상태 변화가 많으면 불필요한 재렌더링이 자주 발생합니다. 이런 구조 때문에 useEffect, useCallback, useMemo 등이 필요해집니다.

스벨트는 "파인 그레인드 리액티비티(Fine-grained reactivity)" 개념을 사용합니다. 즉, 상태가 쓰인 부분만 화면을 업데이트합니다. 불필요한 전체 함수 실행이 없고, 자동으로 필요한 부분만 바뀌니 코드가 간결하고 빠릅니다.

리액트에서의 상태 관리와 최적화

리액트에서는 상태를 변경하면 컴포넌트 전체가 다시 실행됩니다. 그래서 값의 변경만 추적할 수 있도록 객체의 불변성을 꼭 유지해야 하고, 참조가 변경되어야만 변화가 감지됩니다.

이런 구조의 단점을 보완하려고, 상태가 언제 바뀌는지 지정하고, 재사용 가능한 함수나 값은 useCallback, useMemo로 감싸서 불필요한 계산을 막습니다.

스벨트의 파인 그레인드 리액티비티 이해하기

필요한 값만 사용한 만큼만 바꿉니다. 옵저버블(Observable) 객체를 생성해서 값이 바뀔 때만 해당 이펙트가 실행됩니다. 이 프로세스가 자동화되어 있어 의존성 관리도 신경 쓸 필요가 없습니다.

예시:

// 카운트 값을 옵저버블로 만들면
let count = observable(0);
// 여기서 count를 사용하는 곳만 따로 업데이트됩니다.
effect(() => {
  console.log(count.get());
});
count.set(1); // effect 함수만 재실행

스벨트의 반응성, 리액트에서도 활용 가능

스벨트의 방식은 "legend-state"와 같은 라이브러리로 리액트에서 부분적으로 사용할 수 있습니다. 값을 옵저버블로 만들고, 변경된 부분만 리렌더링하게 하여 리액트의 기본적인 렌더링 흐름을 최적화합니다.

돔(DOM) 조작 패턴의 의미 있는 변화

모달이나 드롭다운 메뉴에서 화면 바깥 클릭을 감지하는 코드는 리액트에서는 여러 단계의 이벤트 처리, 레퍼런스 참조, 훅 조합이 필요합니다. 이렇게 하면 복잡하고 코드 가독성이 떨어질 수 있습니다.

스벨트는 use 지시어로 돔 요소에 직접 기능을 붙일 수 있습니다. 클릭 아웃사이드 기능을 한 줄로 추가할 수 있어 코드가 깔끔하고 직관적입니다.

리액트 19버전에서는 레퍼런스 콜백(ref callback) 패턴이 공식 지원되어 돔 생성/소멸 시점마다 원하는 함수 실행이 가능해졌습니다. 스벨트 스타일을 리액트에서도 쉽게 재현할 수 있습니다.

직관적인 이벤트 핸들링: 스벨트 방식 따라하기

리액트에서 외부 클릭 감지하고 싶다면 다음처럼 할 수 있습니다.

function useOutside(callback) {
  return (element) => {
    function handler(event) {
      if (!element.contains(event.target)) {
        callback();
      }
    }
    document.addEventListener('click', handler);
    return () => {
      document.removeEventListener('click', handler);
    };
  };
}

레프 콜백을 활용해, 원하는 돔 이벤트 처리를 컴포넌트 안에서 한눈에 구현할 수 있습니다.

애니메이션과 트랜지션: 기본 내장된 스벨트, 라이브러리 의존하는 리액트

리액트는 조건부 렌더링만으로는 트랜지션/애니메이션이 어렵고, 요소가 사라질 때 즉시 돔이 제거됩니다. 그래서 Framer Motion 같은 라이브러리를 활용해야 하죠. 생성/제거 시점에 직접 애니메이션을 넣으려면 복잡한 wrapping이 필요합니다.

스벨트는 내장 트랜지션(fade, fly 등)과 직접 함수를 이용해 필요한 애니메이션을 쉽게 정의할 수 있습니다. 생명주기 블록에서 내부적으로 자동으로 처리해 주니 사용할 때 매우 직관적입니다.

스벨트에서 배운 방식, 리액트/뷰에도 적용 가능

스벨트에서 영감을 받은 트랜지션 라이브러리는 리액트와 뷰에서도 똑같은 API로 동작할 수 있습니다. 돈 생성/소멸 시점 포착, 원하는 속성 변화, SEO 친화적 구현 모두 가능해집니다.

실제로 발표자가 만든 스고이(비효율 없는 웹 애니메이션 라이브러리)는 처음엔 스벨트로 시작해, 이후 리액트와 뷰까지 확장되었습니다.

결론: 다양한 관점이 실력 향상의 열쇠

한 가지 프레임워크에만 몰두하기 보다, 서로 다른 방식의 장단점을 비교하며 배우는 것이 더 큰 인사이트를 줍니다. 스벨트의 "직관적이고 자동화된 반응성", "코드와 돔의 연결성", "내장 애니메이션" 방식 등은 리액트의 제한점을 보완하거나 더 나은 구조로 발전하는 키포인트가 됩니다.

자신이 주력하는 기술을 더 잘 활용하고 싶다면, 한 번쯤 스벨트 개념과 튜토리얼을 경험해보길 추천합니다. 새로운 관점이 코드 실력을 크게 성장시켜 줍니다.

Source & Reference :