👀 null도 children에 인식이 된다.

null도 children에 포함되고, child로 인식된다

Divider 컴포넌트를 사용하는데 원하는 결과를 얻지못했다. (a + b + c) 와 같은 뷰를 만들고 싶은데 (a + b +)와 같은 결과 나오는 상황.

디바이더 컴포넌트를 아래와 같이 사용.
secondCare존재에 따라 칠드런이 1개일지 2개일지 정해지는 상황으로 생각했다.

  <Divider
      divider={<>&nbsp;+&nbsp;</>}
               style={{justifyContent: 'start'}}
                 >
                   <BasicText h3 bold={700}>
                     {first_care?.name} ({first_care?.hour}시간)
      </BasicText>
      {Boolean(second_care) && (
        <BasicText h3 bold={700}>
        {second_care?.name} ({second_care?.hour}시간)
      </BasicText>
      )}
 </Divider>

디버깅해보니 이런 이유였다.

React.Children.map(children,(child,idx)=>{ ... })

에서 null값이 children으로 인식되어 들어왔다.
물론 유효한 엘리먼트는 아니다. (!React.isValidElement(child))
이유는 children은 ReactNode를 받는데
ReactNode의 타입에 null이 포함되어있기 때문이다.

 type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

수정 전>>
null역시 cloneChild로 존재하기에
divder의 기능을 수행하지 못한다.

const Divider: React.FC<IDivider> = ({
  children,
  gap,
  divider = <Split {...{gap}} />,
  ...restProps
}) => {
  const lastChildIndex = React.Children.count(children) - 1
  
  return (
    <BasicFlex center {...restProps}>
      {React.Children.map(children, (child, idx) => {
        const cloneChild = React.isValidElement(child)
          ? React.cloneElement(child)
          : child
        return (
          <>
            {cloneChild} {lastChildIndex === idx ? null : divider}
          </>
        )
      })}
    </BasicFlex>
  )
}

수정 후>>
cloneDvider가 null이면 아무것도 반환하지 않도록했다.
idx를 마지막 인덱스가 아닌 첫번째 인덱스인지 여부로 확인하는 로직으로 변경이 필요해졌다. null역시 React.Children.count(children)의 갯수로 카운팅 되었기 때문에 비교 기준으로 타당하지 않기 때문이다.

const Divider: React.FC<IDivider> = ({
  children,
  gap,
  divider = <Split {...{gap}} />,
  ...restProps
}) => {
  return (
    <BasicFlex center {...restProps}>
      {React.Children.map(children, (child, idx) => {
        const cloneChild = React.isValidElement(child)
          ? React.cloneElement(child)
          : child

        if (!cloneChild) {
          return null
        }
        
         return (
          <>
            {idx === 0 ? null : divider}
            {cloneChild}
          </>
        )
      })}
    </BasicFlex>
  )
}
export default Divider