[Pro react] 5장. 정교한 상호작용

09 Jun 2021

book

올바른 기능 작동, 빠른 로드 시간, 높은 체감 성능만으로 오늘날 좋은 어플의 모든 요건을 충족한다고 말할 수도 없다. 이 밖에도 인터페이스가 세련되고 매끄러워야 하며 애니메이션 요소와 드래그 앤드 드롭 상호작용과 같은 정교한 상호작용을 지원해야 한다.

리액트의 애니메이션

리액트는 애니메이션을 처리하는 기본 방법으로 애드온 모듈의 일부인 고수준 ReactCSSTranstionGroup을 제공한다. ReactCSSTranstionGroup은 완전한 스택 애니메이션 라이브러리는 아니므로 값 보간, 타임라인 관리나 변경 등은 지원하지 않지만 컴포넌트가 DOM에 추가 또는 제거 될 때 CSS트랜지션과 애니메이션을 트리거하는 방식으로 리액트에서 CSS 전환을 통합할 수 있게 해준다. CSS트랜잭션과 애니메이션은 하나의 CSS 스타일 구성에서 다른 구성으로 보간(interpolate)하는 방법을 제공하는 표준 브라우저 메커니즘이다.

다음 두 절에서는 CSS애니메이션이 작동하는 방법을 개략적으로 살펴보고 ReactCSSTranstionGroup을 이용해 컴포넌트 애니메이션을 수행하는 방법을 배운다.

CSS 트랜지션과 애니메이션의 기초

ReactCSSTranstionGroup을 이용하려면 CSS 트랜지션과 애니메이션을 설정하느 데 익숙해야 하며, 이를 자바스크립트로 트리거하는 방법을 알아야 한다. 리액트 컴포넌트와의 통합으로 진행하기전에 이 주제에 대해 간단하게 알아보자.

CSS를 이용한 애니메이션에는 CSS트랜지션과 CSS 키프레임 애니메이션의 두 가지 범주가 있다.

CSS트랜지션은 시작 상태와 종료 상태의 두 가지 고유한 상태 간의 값을 보간하는 애니메이션 기법이다.
CSS 키프래임 애니메이션은 시작과 종료 외에도 키프래임을 이용해 중간 단계를 제어하는 방법으로 더 복잡한 애니메이션을 만들 수 있게 해준다.

CSS 트랜지션 CSS 트랜지션은 두 CSS 속성 값 사이를 전환하는 방법으로 애니메이션을 적용하는 기법.

예를 들어, 요소의 색상을 회색에서 빨강으로 변경하는 경우 일반적으로 즉시 바뀐다. 반면 CSS 트랜지션을 이용하면 지정한 시간 동안 천천히 색상을 바뀌게 할 수 있다.

CSS 트랜지션은 transition 속성을 이용해 제어한다. 이 속성은 브라우저가 해당 셀렉터 내의 속성값을 지정한 시간 동안 보간해 애니메이션 효과를 만들게 한다. transition속성은 최대 4개의 특성을 받는다.

애니메이션을 적용할 요소 속성 이름. 생략하면 애니메이션 가능한 모든 속성이 대상이 된다.
애니메이션 지속 시간
가속 곡선을 제어할 선택적 타이밍 함수
애니메이션을 시작하기 전 선택적 지연 시간

마우스 포인터를 위로 옮기면 배경색이 바뀌는 버튼 모양의 HTML링크를 만들어보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hover Transition</title>
    <style media="screen">
        a{
            font-family: Helvetica, Arial, sans-serif;
            text-decoration: none;
            color: #ffffff;
        }

        .button{
            padding: 0.75rem 1rem;
            border-radius: 0.3rem;
             box-shadow: 0;
            background-color: #bbbbbb;
        }

        .button:hover{
            background-color: #ee2222;
            box-shadow: 0 4px #990000;
            transition: 0.5s;
        }
    </style>
</head>
<body>
<a href="#" class="button">Hover Me!</a>
</body>
</html>

키프레임 애니메이션

트랜지션 기반 애니메이션에서는 애니메이션의 두 지점(시작 상태와 최종상태)만 제어할 수 있으며, 모든 중간 단계는 브라우저가 보간을 통해 생성한다.CSS애니메이션을 만드는 다른 기법으로 keyframe속성을 이용하는 키프레임 애니메이션이 있으며, 브라우저가 모든 것을 처리하는 트랜지션 기법에 비해 애니메이션 시퀀스의 중간 단계를 휠씬 세부적으로 제어할 수 있다.

키프레임을 이용하려면 다음과 같이 @keyframes 규칙과 함께 별도의 CSS 블록에 애니메이션 단계를 지정하면 된다.

@ketframes pulsing-heart { 0%{transform: none;} 50%{transform: scale(1.4);} 100%{transform: none;} }

이 블록은 pulsing-heart라는 이름의 키프레임 집합으로, 각각 애니메이션의 시작 중간 끝에 해당하는 키프레임 세 개를 정의한다.

키프레임 정의는 나중에 animation 속성을 통해 스타일 정의에서 참조할 수 있다. animation 속성은 키프레임 집합의 이름, 애니메이션 지속 시간, 다른 선택적 구성을 받는다. 간단한 예로 마우스로 가리키면 고동치는 심장을 만들어 보자.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Hover Transition</title>
     <style media="screen">
         body{
             text-align: center;
         }
         @keyframes pulsing-heart {
             0% {transform: none;}
             50% {transform: scale(1.4);}
             100% {transform: none;}
         }
         .heart{
             font-size: 10rem;
             color: #ff0000;
         }

         .heart:hover{
             animation: pulsing-heart .5s infinite;
             transform-origin: center;
         }
     </style>
 </head>
 <body>
 <div>
     <div class="heart">&hearts;</div>
 </div>
 </body>
 </html>

프로그래밍 방식으로 CSS트랜지션과 애니메이션 시작

[여기서 정지하고 다음 장부터 진행]