React Academy · 강의

cloneElement로 props 복제 및 주입

React.cloneElement를 사용해 부모의 숨겨진 props를 자식 구성 요소에 전달합니다.

레슨 4/413개 단계

cloneElement로 props 복제 및 주입은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 레슨에서는 React.cloneElement를 사용해 자식 요소를 복제하고 부모의 추가 프롭을 주입합니다. 자식은 이러한 프롭의 존재를 알 필요가 없습니다.

cloneElement란 무엇인가요

`React.cloneElement(element, props, ...children)`는 기존 요소를 기반으로 새 React 요소를 만들고, 새 프롭을 원래 프롭과 병합합니다. 원래 요소의 타입은 유지됩니다.

const clone = React.cloneElement(child, { active: true });

cloneElement를 사용하는 이유

부모 컴포넌트는 자식이 알지 못하는 상태에서 활성 상태나 이벤트 핸들러 같은 동작을 자식에게 주입할 수 있습니다. 이 방식은 탭 시스템, 아코디언, 폼 그룹에서 사용됩니다.

탭 표시줄 예시

Tabs 컴포넌트는 각 Tab 자식을 복제하고 `isActive`와 `onClick` 프롭을 자동으로 주입할 수 있으므로, 사용하는 쪽에서 이를 직접 연결할 필요가 없습니다.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Props 병합 규칙

cloneElement는 새 프롭을 원래 프롭 **위에** 병합합니다. 원래 요소에 같은 키의 프롭이 이미 있으면 새 값이 우선합니다. style과 className은 직접 처리하지 않는 한 병합되지 않고 덮어써집니다.

이벤트 핸들러 병합

이벤트 핸들러를 덮어쓰는 대신 병합하려면 cloneElement에 전달하기 전에 콜백을 직접 조합하세요.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

자식 바꾸기

`cloneElement`의 세 번째 인수는 요소의 자식을 바꿉니다. 원래 자식을 완전히 덮어쓰려면 새 콘텐츠를 전달하세요.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

복제 전 요소 타입 확인

복제하기 전에 자식이 유효한 React 요소인지 확인하고, 필요하면 타입도 확인하세요. 이렇게 하면 요소가 아닌 자식(텍스트, 숫자, null)을 복제하는 일을 피할 수 있습니다.

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement와 Context 비교

cloneElement는 자식의 구조를 알고 있어야 하므로 취약합니다. 여러 단계에 걸쳐 암시적 데이터를 전달할 때는 일반적으로 Context를 사용하는 편이 좋습니다. 직접적인 부모-자식 프롭 주입이 필요할 때만 cloneElement를 사용하세요.

현대적인 대안: 렌더링 프롭과 훅

과거에 cloneElement를 사용하던 많은 경우에는 사용자 정의 훅이나 렌더링 프롭이 더 깔끔한 해결책입니다. 부모와 직접적인 자식을 모두 직접 관리하는 경우에만 cloneElement를 고려하세요.

빠른 확인

원래 요소와 React.cloneElement에 전달한 프롭 객체에 같은 프롭이 있으면 어떻게 되나요?

인터랙티브 레슨에서 답해보세요

복습

React.cloneElement는 요소를 복제하고 새 프롭을 주입합니다. 복합 컴포넌트에서 부모가 자식에게 암시적으로 프롭을 주입할 때 사용하세요. 계층이 더 깊다면 Context나 렌더링 프롭을 우선 고려하세요.

과정 완료

축하합니다! **React 자식 API 및 슬롯 패턴** 과정을 완료하셨습니다. 이제 유연한 레이아웃 컴포넌트를 만들기 위해 props.children, React.Children 유틸리티, 이름 있는 슬롯 프롭, cloneElement를 능숙하게 사용할 수 있습니다.

무료로 시작

AI 튜터와 함께 React을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 88
레슨: 324

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“cloneElement로 props 복제 및 주입” 강의는 무료인가요?

네 — “cloneElement로 props 복제 및 주입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“cloneElement로 props 복제 및 주입”에서 뭘 배우나요?

React.cloneElement를 사용해 부모의 숨겨진 props를 자식 구성 요소에 전달합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“cloneElement로 props 복제 및 주입” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기