React에서 children, child 컴포넌트에 props를 넘겨주는 방법

Question

child 컴포넌트에 props를 넘겨주는 방법이 있을까요? 이런 구조인데 Child 컴포넌트가 부모 컴포넌트의 값을 고정으로 받아야 합니다. 하나하나 props로 넘겨주지 않고 Parent 컴포넌트안에서 props로 넘겨주고 싶은데 어떻게 하면 좋을까요?

성원 · Answer

| Parent 컴포넌트안에서 props로 넘겨주고 싶은데 어떻게 하면 좋을까요? 이 말로 미루어보아 Children을 props로 받는 구조인 것 같습니다. React.cloneElement 함수를 사용해서 고정된 값을 넘겨주면 될 것 같습니다. children 컴포넌트들이 특정 key, id 그리고 클릭 여부(defaultActive)를 받는 상황이라고 하면 다음과 같이 작성하면 될 것 같아요 import {cloneElement} from "react" const Parent = ({ id, defaultActive, children }) => { const cloneChildren = children.map((el, index) => { return cloneElement(el, { key: `key${index + 1}`, id, active: defaultActive === index, }); }); return <div>{cloneChildren}</div>; };

{cloneChildren}

; };