[React] cloneElement()

React내에서 cloneElement()라는 것이 있다.
cloneElemenet란?

• 쉽게 말해서 엘리먼트를 복제하는 것!

<InputGroup id={id} label={labelName} labelPos="left" error={error} fullWidth>
        <input
          type={type}
          onChange={onChange}
          onBlur={onBlur}
          value={value}
          placeholder={placeholder}
          name={name}
          id={id}
          disabled={inputDisabled}
        />
</InputGroup>

위 코드를 보면, InputGroup의 id와 input의 id를 각각 지정해주었어야한다.

id가 다를 경우 human error를 발생한다…

이 경우, inputGroup에서 사용한 id를 input의 id로도 사용하고 싶기 때문에
cloneElement를 이용할 것이다.

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

element를 기준으로 복사하고, 새로운 React 엘리먼트를 복사하고 반환한다.
config는 key와 ref 그리고 모든 props를 포함한다.
config에 key와 ref가 없다면 원본 엘리먼트의 key와 ref는 그대로 유지된다.

{React.cloneElement(children, { id })}

위 코드는 children을 복사할 것이며, id의 props를 받겠다는 뜻이다!
즉, input이 children인데, props의 id값을 받아서 나는 해당 input태그도 props의 id를 사용하겠다는 것이다!