Projects: data mapping 시 ref childrern

[choigirang]

• children width 값을 받아오기 위해, parent 요소인 DisplayImageWithTooltips 지정 후 ref children을 받아오고 싶지만 빈 배열 반환

export default function AboutContent(props: ProjectDetailType) {
  const { projectName, description, github, stack, link } = props;
  const [isHover, setIsHover] = useState('');
  const [childWidth, setChildWidth] = useState(0);
  const txtBoxEl = useRef<HTMLDivElement | null>(null);
  const childEls = useRef<HTMLDivElement | null>(null);

  const floorItems = [
    { title: '프로젝트명', value: projectName },
    { title: '스택', value: [...stack.frontend, ...stack.backend] },
    { title: '링크', value: link },
    { title: '깃허브', value: github },
    { title: '설명', value: description },
  ];

  const handleImageInteraction = (event: React.MouseEvent<HTMLElement, MouseEvent>, el: string) => {
    event.stopPropagation();
    if (event.type === 'mouseenter') {
      setIsHover(el);
    } else if (event.type === 'mouseleave') {
      setIsHover('');
    }
  };

  useEffect(() => {
    const hideAndAddPlusBtn = () => {
      const txtBoxWidth = txtBoxEl.current?.getBoundingClientRect().width;

      if (!txtBoxEl.current) return;
      console.log(txtBoxEl);
      console.log('children', txtBoxEl.current.childNodes[0]);
    };

    const handleChildrenWidth = () => {
      hideAndAddPlusBtn();
    };

    window.addEventListener('resize', handleChildrenWidth);
    handleChildrenWidth();
    return () => {
      window.removeEventListener('resize', handleChildrenWidth);
    };
  }, [txtBoxEl.current]);

  return (
    <Container>
      {floorItems.map((items, index) => (
        <Floor key={index}>
          <Title>{items.title} :</Title>
          <Text id="txt Ref" ref={txtBoxEl} checkStack={items.title === '스택'} checkDes={items.title === '설명'}>
            {/* 스택 데이터 시 */}
            {items.title === '스택' &&
              Array.isArray(items.value) &&
              items.value.map(item => (
                <div id="span">{item.displayName}</div>
                // <DisplayImgWithTooltip
                //   onMouseEnter={e => handleImageInteraction(e, item.name)}
                //   onMouseLeave={e => handleImageInteraction(e, item.name)}
                //   variants={variants}
                //   role="button"
                //   key={item.displayName}
                //   ref={e => console.log(e)}>
                //   <img
                //     className="stack-img"
                //     src={`https://cdn.simpleicons.org/${item.name}/${item.color}`}
                //     alt="stack-icon"
                //     width="32"
                //     height="32"
                //   />
                //   <Tooltip
                //     show={isHover}
                //     name={item.name}
                //     displayName={item.displayName}
                //     color={item.color}
                //     horizon="center"
                //     vertical="bottom"
                //   />
                // </DisplayImgWithTooltip>
              ))}
            {/* 이외 데이터 */}
            {!Array.isArray(items.value) && <span ref={(e) => console.log(e)}>{items.value}</span>}
          </Text>
        </Floor>
      ))}
    </Container>
  );
}

[choigirang]

• 여러 개의 매핑에 따라 요소가 생성되고 있음
• ref를 통해 요소를 지정해주고 있지만, Container 에 해당하는 ref 가 마지막 요소만을 인식하기 떄문에 children을 인식할 수 없음
• 찾고 싶은 요소는 span 이지만, 마지막 매핑의 children이 비어있으므로 요소를 찾을 수 없음

  // 결과
  // 1번째 매핑
  <div ref={ref}>
  <span>1</span>
  </div>
  // 2번째 매핑
  <div ref={ref}>
  <span>2</span>
  </div>
  // 3번째 매핑
  <div ref={ref}>
  <span>3</span>
  </div>
  // 4번째 매핑
  <div ref={ref}>
  </div>

[choigirang]

• ProjectList라는 하위 컴포넌트로 해당 데이터를 분리하여, 컴포넌트 내에서 매핑

  
  // AboutContent.tsx
  return (
  <Container>
  {floorItems.map((items, index) => (
    <Floor key={index}>
      <Title>{items.title} :</Title>
      <Text
        id="txt Ref"
        ref={items.title === '스택' ? txtBoxEl : undefined}
        checkStack={items.title === '스택'}
        checkDes={items.title === '설명'}>
        {/* 스택 데이터 시 */}
        {isStackInfoArray(items.value) && (
          <ProjectStackList isHover={isHover} value={items.value} setIsHover={setIsHover} />
        )}
        {/* 이외 데이터 */}
        {!Array.isArray(items.value) && returnTag(items.title, items.value)}
      </Text>
    </Floor>
  ))}
  </Container>
  );

// ProjectList.tsx export default function ProjectStackList(props: { isHover: string; setIsHover: Dispatch<SetStateAction>; value: StackInfoType[]; })

return (

{value.map(item => ( handleImageInteraction(e, item.name)} onMouseLeave={e => handleImageInteraction(e, item.name)} variants={variants} role="button" key={item.displayName}> ))} ); ```