React에서 Dropdown을 만들 때, Dropdown 렌더링을 display:none이 좋을까? visibility: hidden이 좋을까?

visibility는 이미 DOM에는 등록이됐지만, 실제로는 UI가 보이지 않게합니다.

display: none은 해당 엘리먼트가 DOM에서 완전히 제거됩니다. 그러면 엘리먼트가 다시 표시돼야할 때, DOM에 추가 렌더링이 필요하게 돼서 visibility에 비해 성능에 부담을 줄 수 있습니다.

성능에 부담을 줄 수 있는 이유는 다음과 같습니다.

visibility: hidden의 경우, 엘리먼트가 브라우저에서 숨겨져도 레이아웃 계산에 참여합니다. 반면에 display: none의 경우, 레이아웃 계산에서 해당 엘리먼트를 제외하고 계산하기 때문에, 엘리먼트를 다시 표시할 때 돔 렌더링 비용이 더 많이 들어갈 수 있습니다.

하지만, 최적화의 경우 성능차이가 미미하므로 가독성, 유지보수성을 우선시 할 필요도 있습니다.