부모 컴포넌트의 width 값에 맞게 자식 컴포넌트 동적 크기 조절 (React-Typescript)

부모 컴포넌트에서 두가지의 자식 컴포넌트를 가지고 있는 상황이다. 이 중 하나의 컴포넌트의 width값과 height값을 상위컴포넌트의 width값의 절반 크기를 가지게 해야하는 상황이다.

function ProjcetContent({ ...project }: IProject): JSX.Element {
  return (
    <div className={styles.container}>
      <ProjectImages />
      <ProjectDetail {...project} />
    </div>
  );
}

export default ProjcetContent;

ProjectImages의 컴포넌트의 width값과 height값을 ProjectContent 컴포넌트의 width값의 절반만큼만 가지게 해야한다. useRef, useState, useEffect를 이용하면 꽤 간단하게 구현할 수 있다. 구현된 코드를 보자.

function ProjcetContent({ ...project }: IProject): JSX.Element {
  
  // 부모 컴포넌트에 연결시킬 ref
  const parentRef = useRef<HTMLDivElement | null>(null);
  
  // 자식 컴포넌트의 width와 height값을 조절하기 위한 state
  const [childSize, setChildSize] = useState({ width: 0, height: 0 });
  
  // 반응형 디자인을 위한 state
  const [isResized, setIsResized] = useState(false);

  useEffect(() => {
    
    // 자식 컴포넌트의 width와 height를 조절하는 함수
    const updateSize = () => {
      
      // 992px 이상에서 true, 이하에서는 false
      if (window.innerWidth >= 992) {
        setIsResized(() => true);
      } else {
        setIsResized(() => false);
      }
      
      // parentRef.current가 undefined가 아닐 때 실행
      if (parentRef.current) {
        
        // 부모 컴포넌트 크기 계산해서 자식 컴포넌트 state에 전달
        const parentWidth = parentRef.current.offsetWidth;
        setChildSize(() => ({
          width: parentWidth / 2,
          height: parentWidth / 2,
        }));
      }
    };
    
    // resize 이벤트에 updateSize함수 설정
    window.addEventListener("resize", updateSize);
    updateSize();

    // 컴포넌트 언마운트 시 이벤트 제거
    return () => window.removeEventListener("resize", updateSize);
  }, [childSize]);

  return (
    
    // ref 연결
    <div ref={parentRef} className={styles.container}>
      <ProjectImages 
        
        // isResized가 true일 때만 props 스타일 적용. (반응형 디자인을 위해)
        style={
          isResized
            ? {
                width: childSize.width,
                height: childSize.height,
              }
            : {}
        }
      />
      <ProjectDetail {...project} />
    </div>
  );
}

export default ProjcetContent;

!!!!! 이거 무한루프 걸려요 ㅠㅠ 수정했습니다.

아래의 포스트를 참고해주세요.
https://velog.io/@dpldpl/React%EC%9D%98-%EB%AC%B4%ED%95%9C-%EB%A3%A8%ED%94%84-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%83%81%ED%83%9C-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%EB%A1%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EA%B8%B0-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0