[react] div 크기 content 길이에 따라 변경

문제

 <P.PostsContaioner id="PostsContaioner">
    <div>
        <P.IconWrapper>
           <P.Icon1>{field}</P.Icon1>
           <P.Icon2>{date}</P.Icon2>
            <img
              src="/images/cut.png"
              alt="수정하기"
              onClick={() => navigate(`/edit/${date}`)}
           />
           </P.IconWrapper>
        <P.TextWrapper ref={textBoxRef}>
           <P.TextBox> 📍 {title}</P.TextBox>
           <P.TextBox2>{content}</P.TextBox2>
        </P.TextWrapper>
    </div>
</P.PostsContaioner>

 

 

 

PostConatiner가 하얀색 박스일 때, content의 길이에 따라 세로길이가 길어져야했다. 

 

 

해결

  const textBoxRef = useRef(null);
  
  useEffect(() => {
    if (textBoxRef.current) {
      const textBoxHeight = textBoxRef.current.clientHeight + 70;

      const container = document.getElementById("PostsContaioner");
      if (container) {
        container.style.height = `${textBoxHeight}px`;
      }
    }
  }, [content, textBoxRef.current]);

 

useEffect를 통해 새로운 기록(content)을 가져올 때 마다

PostsContaioner의 height를 바꿔줄 수 있도록 지정하였다.

 

useRef()을 통해 특정 요소에 접근해서 clientHeight(요소 내부 높이)를 구해 height를 변경해주었다

(70은 text 외에 아이콘들 & 여백 등을 위해 더해줌)