React 상태 변경과 CSS 전환

CSS transition은 속성을 두 값 사이에서 시간이 지남에 따라 부드럽게 보간하여 즉시 바뀌는 대신 자연스럽게 변화시킵니다. 요소에 transition: property duration timing-function delay를 선언하여 사용합니다.

리액트에서는 일반적으로 인라인 값을 직접 애니메이션하지 않습니다. 대신 상태로 클래스나 스타일을 전환하면 CSS가 중간 프레임을 대신 처리합니다.

일반적인 패턴은 useState에 불리언 값을 저장하고 값이 바뀔 때 CSS 클래스를 교체하는 것입니다. 클래스가 바뀌면 대상 속성에 새 값이 적용되고 CSS가 그 차이를 애니메이션으로 보여 줍니다.

예를 들어 isOpen은 요소에 open 클래스가 있는지를 결정하고, open 클래스는 다른 높이나 변환 값을 설정합니다.

일반적인 설정은 const [isVisible, setIsVisible] = useState(false)와 같습니다. 버튼에서 setIsVisible(v => !v)를 호출하여 값을 전환합니다.

함수형 업데이트인 v => !v를 사용하면 여러 업데이트가 함께 대기할 때 오래된 상태를 사용하지 않으므로 전환이 안정적으로 동작합니다.

클래스 이름을 동적으로 만듭니다. className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}와 같이 작성할 수 있습니다. 기본 클래스에는 전환 선언을 넣고, 수정자 클래스에는 시작 값과 종료 값을 넣습니다.

항상 존재하는 기본 클래스에 transition을 유지하면 열릴 때와 닫힐 때 모두 애니메이션이 실행됩니다.

속성을 나열하면 여러 속성을 한 번에 애니메이션할 수 있습니다. transition: transform 300ms ease, opacity 300ms ease처럼 작성합니다. 페이드와 슬라이드를 결합하려면 transform의 translateY와 함께 opacity를 변경합니다.

두 속성을 함께 애니메이션하면 요소가 위로 미끄러지면서 나타나는 세련된 진입 효과를 만들 수 있습니다.

transition-delay는 전환 시작을 늦춥니다. 목록 항목마다 지연 시간을 점점 늘리면 각 항목이 이전 항목보다 조금씩 늦게 애니메이션되는 계단식 효과를 만들 수 있습니다.

리액트에서는 예를 들어 style={{ transitionDelay: index * 50 + 'ms' }}와 같이 인라인으로 지연 시간을 계산할 수 있습니다.

display 속성은 none과 block 사이에 중간 값이 없으므로 애니메이션할 수 없습니다. 이 속성을 전환하면 페이드가 아니라 즉시 바뀝니다.

대신 시각적인 페이드에는 opacity를 애니메이션하고, 보이지 않는 요소가 클릭을 무시하도록 pointer-events: none을 전환하세요.

시간 조절 함수는 지속 시간 동안 속도가 어떻게 변할지를 결정합니다. linear는 일정한 속도로 움직이고, ease는 시작과 끝에서 느리게 움직이며, cubic-bezier(...)를 사용하면 곡선을 완전히 직접 정의할 수 있습니다.

사용자 지정 곡선은 빠르게 튀어나오거나 탄력적으로 움직이는 느낌을 만드는 데 적합합니다. 예를 들어 cubic-bezier(0.34, 1.56, 0.64, 1)은 약간 초과하는 효과를 냅니다.

--speed: 300ms와 같은 CSS 사용자 지정 속성에 지속 시간을 저장하고 transition: opacity var(--speed) ease처럼 재사용할 수 있습니다. 이렇게 하면 구성 요소 전체에서 시간을 일관되게 유지할 수 있습니다.

리액트에서는 style={{ '--speed': '500ms' }}를 통해 인라인으로 변수 값을 설정할 수도 있으므로, 속성으로 애니메이션 시간을 조정할 수 있습니다.

브라우저는 레이아웃을 다시 계산하거나 다시 그리지 않고 GPU 합성기에서 transform과 opacity를 애니메이션할 수 있습니다. width, top, margin과 같은 속성을 애니메이션하면 매 프레임마다 레이아웃 작업이 발생하여 끊길 수 있습니다.

이동하거나 크기를 조절하거나 회전해야 할 때는 transform을 사용하고, 페이드 효과가 필요할 때는 opacity를 사용하세요.

리액트에서 안정적인 전환을 구현하려면 불리언 상태, 조건부 수정자 클래스, 그리고 GPU에 적합한 속성에 transition을 선언하는 기본 클래스를 결합해야 합니다. 상태가 클래스를 전환하고 CSS가 애니메이션을 처리합니다.

이렇게 하면 구성 요소를 선언적으로 유지하면서 브라우저의 기능을 활용해 부드러운 움직임을 만들 수 있습니다.

성능이 좋은 애니메이션에 대한 이해도를 확인해 보세요.

상태에 따라 바뀌는 클래스를 전환하여 CSS 전환을 시작하고, transform과 opacity를 함께 애니메이션하며, 지연 시간으로 순서를 엇갈리게 만들고, opacity와 pointer-events를 사용하여 display 전환을 피하는 방법을 배웠습니다.

또한 시간 조절 함수와 CSS 변수로 지속 시간을 설정하는 방법, GPU에서 합성되는 속성이 움직임을 부드럽게 유지하는 이유도 살펴보았습니다.