{children} 에 값 넘기기

{children}  내부에 값을 내려주고 싶은 상황이 있어 찾아보다가 cloneElement() 가 있어서 확인 및 정리해보고자 작성해본다

 

 

---

 

React 에서의 cloneElement() 에 대한 설명이다.

React.cloneElement(element,[config],[...children])

element를 기준으로 새로운 React 엘리먼트를 복사하고 반환합니다. config는 key와 ref 그리고 모든 새로운 props를 포함합니다. 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props가 새로운 props와 얕게 합쳐진 뒤 주어집니다. 새로운 자식들은 기존의 자식들을 대체합니다. config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지됩니다.

아래의 구문과 동일하다고 한다.

<element.type {...element.props} {...props}>{children}</element.type>

 

그렇지만 ref들이 유지된다는 점이 다릅니다. 즉 조상이 가지고 있을 ref를 사용하여 자식 엘리먼트에 접근하는 것이 허용됩니다. 새로운 엘리먼트에 덧붙여지는 것과 동일한 ref를 얻을 수 있습니다. 새로운 ref 또는 key가 있다면 이전 값을 대체합니다.

 

 

어렵다....

 

더 찾아보고 내가 작성한 코드를 서술해본다..

 

기존 {children} 대신해서

 

{React.cloneElement(children,{props로 내릴값})}

위와 같이 작성하고 확인해본 결과.!!!

 

성공...!!!!

 

{children} 에 props 내려주기 완료!

 

https://reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React