Remotion Reuse Components

React 컴포넌트의 진가는 재사용에 있다. 카드뉴스·반복 요소·여러 장면에 같은 비주얼을 적용할 때 핵심 패턴을 정리한다.

---

1️⃣ 컴포넌트 분리

타이틀처럼 반복될 요소를 별도 컴포넌트로 분리한다:

import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

const Title: React.FC<{ title: string }> = ({ title }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <div style={{ opacity, textAlign: "center", fontSize: "7em" }}>
      {title}
    </div>
  );
};

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Title title="Hello World" />
    </AbsoluteFill>
  );
};

---

2️⃣ 여러 인스턴스 렌더링

<Title>을 여러 번 사용하면 각각 독립적으로 동작한다:

<Title title="Hello" />
<Title title="World" />

---

3️⃣ <Sequence>로 시간 제어

<Sequence>로 각 인스턴스의 **시작 프레임(from)**과 **지속 프레임(durationInFrames)**을 제어한다:

import { Sequence } from "remotion";

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence durationInFrames={40}>
        <Title title="Hello" />
      </Sequence>
      <Sequence from={40}>
        <Title title="World" />
      </Sequence>
    </AbsoluteFill>
  );
};

📌 두 번째 <Title> 안에서 useCurrentFrame()은 0부터 시작한다. 절대 시간이 아니라 시퀀스 내 상대 시간이다.

기본적으로 Sequence는 절대 위치(position: absolute)로 배치된다. 일반 <div>처럼 만들고 싶으면 layout="none" 옵션:

<Sequence layout="none" from={40}>
  <Title title="World" />
</Sequence>

---

4️⃣ 실전 패턴

패턴	용도
컴포넌트 분리	카드뉴스·리스트 같은 반복 요소
<Sequence>	자막·장면·인트로/아웃트로
layout="none"	그리드·flexbox 안에 자연스럽게 배치
React Fragment	여러 컴포지션을 한 Root에 등록

---

📚 영역 구분

• 여러 컴포지션 조합: How to combine compositions
• 파라미터화: Remotion Parameterized Videos (inputProps)
• 한글 hub: Remotion 시작하기

상위 문서: ← Remotion 시작하기 출처: Remotion 공식 문서 — Reuse components 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Reuse components 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동