[React] 컴포넌트 전환 애니메이션 주는 법

 

💡 전환 애니메이션 효과 주기.

---

 

Step 1. 부착하면 애니메이션 나오는 className을 하나 만들어라

 

 

css 파일에 적어놓은 클래스 명은 전체 파일에 공유되니까 일단 App.css에 작성했음.

 

🔍Step 1-1. 애니메이션 동작 전 className 만들기

🔍Step 1-2. 애니메이션 동작 후 className 만들기

동작 후 opacity를 0.5초에 걸쳐서 변화해 주세요.

transition : 특정 css 효과(start랑 비교해서 바뀐효과) 바뀐 효과 적용 시간

🔍Step 1-3. className에 transition 속성 추가

tap 부분에 적용한다고 했을 때 3개의 tap 모두에게 클래스 네임을 적용하는것 보다는

div 로 전체를 한번 감싸는것이 효율적이다.

 

🔍Step 1-4. 동작 전 클래스 네임에 효과를 주고 싶을 타이밍에 동작 후 클래스 네임을 붙이면 된다.

 

 

이러한 trainsition이 적용되는 조건!

<div className="start"> 에서 <div className="Start end"> 로 바뀌는 순간에 transition이 적용된다.

즉 버튼을 눌렀을 때 클래스 네임에 end를 때었다 붙였다 반복하면 된다.

 

 

위으 코드에선 tap 이라는 코드가 변할 때 마다 end 를 때었다 붙였다 하면 transition을 적용이 가능하다.

 

useEffect 를 활용하기! deps 에 tap 코드를 넣어 변할 때의 상황을 캐치해주고

 

그 상황을 저장할 수 있는 변수와 변경함수(useState)를 선언한다.

 

className 의 문자열을 데이터 값으로 변경시키고자 할때

 

일단 중괄호를 쳐주고 백픽` ` 을 해준후에 변경하고자 하는 부분(변수를 넣고자 하는 부분에) ${ } 를 통해 변경이 가능.

 

아니면 className={"start "+ fade} 이런식으로 넣어주면 됨.

 

여기서 핵심은 클래스 명에 end 를 떼었다가 붙였다가를 반복해줘야 한다.

useState 이전에 작업을 먼저하는 클린업 펑션(return)을 써서 먼저 떼어주고 붙이면 되겠네??

 

하지만 useState의 set 이 동작하여 값이 바뀌는 건 한번에 모았다가 바뀜.(효율성을 위해서)

💡React의 automatic batching 기능이다. useState의 변경한 함수들이 근처에 있으면 이러한 것들을 합쳐서 딱 한번만 변경을 해준다

 

이러한 특성을 해결하기 위해서 일정 시간차를 주는 setTimeout 함수를 사용하는것도 좋다.

 

opacity 변경 뿐만 아니라 scale 등 다양한 효과를 줄 수 있다.

 

 

detail 화면 로드 될때 화면 서서히 보이게 하려면

 

마찬가지로 setFade를 컨트롤 할수 있는 useEffect 를 만들어주고 deps 는 비워둔다.

그리고 기존의 최 외각 div 밖에 하나의 div 를 더 감싸서 transition 효과를 준다.

 

 

Step 2. 자바스크립트 파일로 돌아와서 필요할 부분에 때고 붙이고를 하면 된다.

 

 

 

 

 

 

 

 

출처 : 코딩애플 React 강의입니다.

스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.

https://codingapple.com/