고정 vs 동적 Nav Links 메뉴 토글 스타일링 in React

Source: Dev.to

Fixed Height Approach

이 접근법에서는 메뉴가 열릴 때 고정된 높이를 지정합니다. 메뉴 높이를 미리 알고 있을 때 잘 작동합니다.

import { useState } from 'react';
import { FaBars } from 'react-icons/fa';
import { links } from './data';

const Navbar = () => {
  const [showLinks, setShowLinks] = useState(false);

  return (
    
       setShowLinks(!showLinks)}>
        
      

      
        

          {links.map(link => (
            
              {link.text}
            
          ))}
        

      
    
  );
};

export default Navbar;

.links-container {
  height: 0;
  overflow: hidden;
  transition: height 250ms ease-in-out;
}

.links-container.open {
  height: 10rem; /* Adjust as needed */
}

이 예시에서는 메뉴 컨테이너의 높이가 기본적으로 0으로 설정되고, 메뉴가 열리면 높이가 10rem으로 설정됩니다.

Dynamic Height Approach

동적 높이 접근법은 메뉴 내용에 따라 자동으로 높이를 조절합니다. 항목 수가 가변적인 경우에 좋은 선택입니다.

import { useState, useRef } from 'react';
import { FaBars } from 'react-icons/fa';
import { links } from './data';

const Navbar = () => {
  const [showLinks, setShowLinks] = useState(false);
  const linksRef = useRef(null);

  const linksContainerStyles = {
    height: showLinks ? `${linksRef.current?.offsetHeight}px` : 0,
  };

  return (
    
       setShowLinks(!showLinks)}>
        
      

      
        

          {links.map(link => (
            
              {link.text}
            
          ))}
        

      
    
  );
};

export default Navbar;

.links-container {
  overflow: hidden;
  transition: height 250ms ease-in-out;
}

이 경우 높이는 메뉴 내부 콘텐츠를 기반으로 동적으로 계산됩니다. 메뉴가 열리면 높이가 콘텐츠에 맞게 조정됩니다.

Key Differences

• Fixed Height: 높이가 수동으로 설정되며 업데이트하지 않는 한 변하지 않습니다. 간단하지만 유연성이 떨어집니다.
• Dynamic Height: 높이가 콘텐츠에 따라 자동으로 조정됩니다. 더 유연하지만 약간 복잡합니다.

Conclusion

두 방법 모두 상황에 따라 유용합니다. 메뉴에 고정된 항목 수가 있다면 고정 높이 접근법을 사용하고, 항목 수가 변하거나 더 큰 유연성이 필요하면 동적 높이 접근법을 선택하세요.

Credits: John Smilga’s course