[CSS][React] 사용자 상호작용에 따른 UI 변경 피드백을 state와 의사 클래스를 함께 쓸 때 주의점

배경 지식

프론트엔드에서는 통상 사용자가 클릭이나 마우스 호버 등의 상호작용을 할 때 ui 스타일이 변경되어 상호작용을 표현한다.

이 표현을 구현하기 위해 React를 기준으로 두 가지 방식 중 하나을 사용할 수 있다. 이는 아래와 같다.

• 하나, 의사 클래스를 이용한 style 변경 | css에서는 :hover과 같은 의사 클래스를 이용하여 몇 가지 상호작용에 대해 스타일 분기처리를 할 수 있다.
  • 스타일의 on off에 대한 분기처리가 css만으로 간단하게 구현 가능하다.
  • :hover, :active, :focus 처럼 간단한 상호작용만 처리 가능하여 복잡한 이벤트의 처리를 할 수 없다.
• 다른 하나, state를 이용한 style 변경 | react의 useState를 이용하여 className이나 style 속성 값을 분기처리 하는 방식
  • 동작 방식
    • 사용자가 상호작용하면 이벤트 핸들러에서 setState로 상태를 변경함
    • 리렌더링 시 변경된 state로 className이나 style 속성 값이 다르게 분기 처리됨
    • ui 상호작용 결과로서 스타일이 변경
  • 전자에 비해 복잡하고 on off의 사이드 이펙트 관리를 직접 해야 함
  • 복잡한 상호작용 피드백 구현 가능

 

문제: 둘을 같이 사용하는 경우

만약 하나의 상호작용에 대해 두 방식을 섞어서 사용하면 어떻게 될까?

예컨대, 사용자가 메뉴에 마우스를 올릴 때 하위 메뉴를 모달 창으로 표출한다고 가정하자.

모달창의 배경 레이아웃인 검정 백그라운드는 css 의사 클래스로 표출하고, 모달 창은 state 스타일 분기처리 방식을 사용했다.

 

그 결과, 모달 창은 두 번의 레이아웃 변경에 걸쳐서 표출되었다.

먼저, css 기반 변경인 검정 백그라운드가 표출되고, 다음에 모달창이 표출되었다. 

이는 깜밖거리는 현상을 만들어서 보기 좋지 않았다.

 

원인이 뭘까.

추측인데,

css의사 클래스 방식은 `사용자 상호 작용 > 렌더링 엔진이 변화를 감지 > 렌더링` 의 방식으로 진행될 것이다.

반면, state 기반 스타일 분기 처리는 `사용자 상호 작용 > state 변경 > 리렌더링 > state 기반 분기 처리 > 렌더링 엔진이 변화를 감지 > 렌더링` 의 순서로 진행될 것이다.

 

따라서 ,사용자 상호작용 시, 전자가 먼저 반영되고 리렌더링 후 후자가 반영되는 것이다.

 

대안

하나의 상호작용에 대한 ui 변경 피드백을 한 가지로 통일해야 한다.