소개
React.cloneElement( element, [config], [...children] )
- 새로운 React 엘리먼트를 복사하고 반환한다.
- config는 key와 ref, 새로운 props를 포함한다.
- 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props가 새로운 props와 얕게 합쳐진다.
- 새로운 자식들은 기존의 자식들을 대체한다.
- config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지된다.
새로운 key와 ref가 있다면 이전 값을 대체한다.
React.cloneElement()는 아래의 구문과 거의 동등하다.
<element.type {...element.props} {...props}>{children}</element.type>그렇지만 ref들이 유지된다는 점이 다르다.
즉 조상이 가지고 있을 ref를 사용하여 자식 엘리먼트에 접근하는 것이 허용된다.
예제
const nodes = React.Children.toArray(children) .filter((element) => React.isValidElement(element)) .map((element, index, elements) => { return React.cloneElement(element as React.ReactElement, { // element가 ReactElement라는 것을 명시해주어야 한다. style: { marginRight: type === "horizontal" && index !== elements.length - 1 ? size : undefined, marginBottom: type === "vertical" && index !== elements.length - 1 ? size : undefined, }, }); });
