[React] Tailwind CSS group과 group-hover 사용법 | 부모 상태에 따라 자식 요소 변경하기

Tailwind CSS를 사용하다 보면 부모 요소의 상태에 따라 자식 요소의 스타일을 변경해야 하는 경우가 있다.

이때 사용할 수 있는 기능이 group이다.

1. group이란?

부모 요소에 group 클래스를 지정하면 자식 요소에서 부모의 상태를 감지할 수 있다.

예를 들어 부모에 마우스를 올렸을 때 자식 요소를 보여주고 싶다면 다음과 같이 작성할 수 있다.

<div class="group">
    <button class="hidden group-hover:block">
        메뉴
    </button>
</div>

평소에는 button이 hidden 상태이기 때문에 보이지 않는다.

하지만 부모인 div에 마우스를 올리면 group-hover:block이 적용되어 버튼이 나타난다.

group
└── group-hover:block

즉, group은 조상 요소의 상태에 따라 후손 요소의 스타일을 변경할 때 사용한다.

2. group-hover

group-hover는 부모 요소에 마우스를 올렸을 때 자식 요소에 특정 스타일을 적용하는 기능이다.

다음과 같이 사용할 수 있다.

<div class="group">
    <p class="text-gray-500 group-hover:text-blue-500">
        마우스를 올려보세요.
    </p>
</div>

평소에는 회색으로 표시되지만 부모 영역에 마우스를 올리면 파란색으로 변경된다.

3. hidden과 함께 사용하기

group은 요소를 숨겼다가 특정 상황에서 보여주는 UI를 만들 때 특히 유용하다.

<div class="group">
    <div class="hidden group-hover:block">
        숨겨진 메뉴
    </div>
</div>

동작은 다음과 같다.

1. 평소에는 hidden이 적용되어 보이지 않는다.
2. 부모 요소에 마우스를 올린다.
3. group-hover:block이 적용된다.
4. block으로 변경되면서 요소가 나타난다.

이러한 방식은 메뉴, 툴팁, 추가 버튼 등을 마우스 호버 시 보여주는 UI를 만들 때 활용할 수 있다.