조건부 렌더링 시 레이아웃 유지하기: CSS visibility 속성

🔒 배경

타이머를 구현하면서, 여러 조건에 따라 일시정지 버튼의 노출 여부가 달라져야 했다.
조건부 렌더링을 사용하여 일시정지 버튼을 처리했는데, 그렇게 하다보니 아래와 같이 전체 레이아웃이 변경되는 문제가 있었다.

🔐 원인

원인은 일시정지 버튼이 조건부로 렌더링됨에 따라, 해당 요소가 DOM에서 완전히 제거되거나 추가되기 때문이다.

CSS로 레이아웃을 조정하려고 했으나 꽤 복잡하고,, 건드려야할 요소들이 많았다. 또한 단순 디자인적인 요소가 아니라는 생각에 요소를 완전히 제거하는 것이 아닌 다른 방법을 고민하게 되었다.

🔑 해결 과정

일시정지 버튼을 항상 렌더링하되 보이지 않게 만들기 위해 visibility CSS 속성을 사용했다.

visibility 속성은 요소의 가시성을 제어한다. visible로 설정하면 요소가 나타나고, hidden으로 설정하면 요소가 숨겨진다. 숨겨진 요소는 공간을 차지하지만 화면에 보이지 않으며, 다른 요소와의 레이아웃을 유지한다.

interface PauseButtonProps {
	isVisible: boolean;
}

const PauseButton = styled.button`
	visibility: ${props => props.isVisible ? 'visible' : 'hidden'};
	//... 기타 속성들
`;

먼저, 일시정지 버튼에 visibility 속성을 추가했다.
버튼의 표시 여부, 즉 해당 속성의 값이 특정 조건에 따라 달라져야 하므로 isVisible이라는 플래그를 통해 이 값을 boolean으로 조절할 수 있도록 했다. 이를 위해 Props 인터페이스를 정의하여 타입도 지정해주었다.

<PauseButton
  isVisible={!isShow && currentRoutineIndex === newRoutine.length - 1 && timeLeft > 0}
  //... 기타 속성들
>
  {isPause ? "▶" : "❚❚"}
</PauseButton>

그 후 일시정지 버튼이 표시되어야 하는 조건을 만족할 때 isVisible 값을 true로 전달하여 visibility 속성이 visible 값을 갖도록 했다.

🔓 완성

의도한 조건에 따라 일시정지 버튼의 노출 여부가 잘 제어되고, 레이아웃도 또한 잘 유지되는 것을 확인할 수 있다..!