Unique Key, DOM element 이슈들

unique key

 {accPositions && accPositions.length > 0
        ? (
          <MainAccaRecruitFrame>
            <JDSwiper
              slidesPerView={1}
              centeredSlides
              paginationtype={PageNationType.bullets}
            >
              {accPositions && accPositions.length > 0
                && accPositions.map((item, idx) => (
                  <JDSwiperSlide className='main-custom-slide' key={item}>
                    {item.map((innerItem:AccJobPostingItemDto) => (

                      <>
                        { MainAccaRecruitCard(innerItem) }
                      </>

                    ))}

                  </JDSwiperSlide>
                ))}
            </JDSwiper>
          </MainAccaRecruitFrame>
        )
        : !loading ? <MainNoPosition /> : <></>}

이 상황에서 해당 에러가 발생했다. 자세히보면 map 안에 <> </>으로 감싸고있는데 해당 영역에 key 값이 없어서이다.
지금 코드를 보면 MainAccaRecruitCardFrame 컴포넌트는 key={item.sn}로 고유한 key 속성을 가지고 있지만, JDSwiperSlide 내부의 배열(item.map) 요소가 key를 부여받지 않았기 때문에 경고가 발생했다.

      {item.map((innerItem:AccJobPostingItemDto) => (
                      <React.Fragment key={innerItem.sn}>
                        { MainAccaRecruitCard(innerItem) }
                      </React.Fragment>
                    ))}

이렇게 수정해준당

forwardRef 버그

LazyImage 이슈

const LazyImage:FC<ILazyImageProps> = (props) => {
  const [error, setError] = useState<boolean>(false);
  useEffect(() => {
    setError(false);
  }, [props.src]);

  if (error)
    return (
      <FrameFallback {...props as any}>
        <img className='img-fallback' src={props.fallbackFailImage || basicFallbackImage} alt='error' />
      </FrameFallback>
    );
  return (
    <Suspense fallback={<FrameFallback {...props as any}><img className='img-fallback' src={props.fallbackLoadingImage || basicFallbackImage} alt='loading' /></FrameFallback>}>
      <Img {...props} onError={() => setError(true)} />
    </Suspense>
  );
};

export const LazyImageLogo:FC<ILazyImageProps> = (props) => <LazyImage fallbackFailImage={iconPagesEmptyLogoError} fallbackLoadingImage={iconPagesEmptyLogoError} {...props as any} />;

export default LazyImage;

해당 영역에서

이런 이슈가 발생했다.

이 경고 메세지는 React 가 DOM 요소에 인식되지 않는 props (fallbackLoadingImage)를 전달해서 발생한 문제이다. img 태그 자체에 전달되고 있어서 경고가 발생했다.

이걸 ...props로 전체 전달하는대신 필요한 속성만 전달하는걸로 변경하였다.

const LazyImage: FC<ILazyImageProps> = (props) => {
  const { fallbackLoadingImage, fallbackFailImage, src, alt, ...restProps } = props; // 필요없는 props 제거
  const [error, setError] = useState<boolean>(false);

  useEffect(() => {
    setError(false);
  }, [src]);

  if (error)
    return (
      <FrameFallback>
        <img className="img-fallback" src={fallbackFailImage || basicFallbackImage} alt="error" />
      </FrameFallback>
    );

  return (
    <Suspense
      fallback={
        <FrameFallback>
          <img className="img-fallback" src={fallbackLoadingImage || basicFallbackImage} alt="loading" />
        </FrameFallback>
      }
    >
      <Img src={src} alt={alt} onError={() => setError(true)} {...restProps} /> {/* Img는 img 태그에 해당하는 props만 전달 */}
    </Suspense>
  );
};

export const LazyImageLogo: FC<ILazyImageProps> = (props) => (
  <LazyImage fallbackFailImage={iconPagesEmptyLogoError} fallbackLoadingImage={iconPagesEmptyLogoError} {...props} />
);

export default LazyImage;

또한 FrameFallback 이라던가 Img에 ref를 전달하지 않게 수정하였다. (원래는 ...restprops를 전달하려고 하였으나 에러 발생함)