React.cloneElement로 input과 children 연결하기

이걸 왜 했을까.

🔻 기존 코드

input과 이름인 label을 엮어주기 위해 htmlFor을 쓴다. 이때 문제는 children이 바뀐다고 해서 input의 value가 바뀌지 않는다는 것이다. 이것을 해결하기 위해 React.cloneElement를 사용한다.

  return (
    <div className={`${className}`}>
      <input
        type="radio"
        id={value}
        checked={checked}
        value={value}
      />
      <label htmlFor={value}>
        {children}
      </label>
    </div>

🔻 개선된 코드

  const childrenWithProps = React.Children.map(children, (element) => {
    if (React.isValidElement(element)) {
      const htmlRef = {
        htmlFor: value,
      };
      return React.cloneElement(element, htmlRef);
    }
    return element;
  });

  return (
    <div className={`${className}`}>
      <input
        type="radio"
        id={value}
        checked={checked}
        value={value}
      />
      <label htmlFor={value}>
        {childrenWithProps}
      </label>
    </div>

React.cloneElement는 말 그대로 element를 복제한다. {children htmlRef=value} 이렇게 코드를 작성할 수 없으니 복제해서 적용하는 것이다.

const htmlRef를 만들지 않고 적용하면 에러가 뜨는데, stackoverFlow에 따르면 React가 보기엔 component가 아니라 props의 type을 나타내기 때문이라고 한다. (무슨 말인지 잘 모르겠다)

참고 자료

• 공식 문서
• 블로그