Transition 전환 애니메이션

1. 애니메이션 동작 전 className 만들기
2. 애니메이션 동작 후 className 만들기
3. className에 transition 속성 추가하기
4. 원할때 2번 className 부착하기
   • 예) tab state가 변할때 end 부착하기

/*1. 애니메이션 동작 전 className 만들기*/
.start{
	opacity: 0; 
    /* 투명도 주는 스타일 */
}
/* 2. 애니메이션 동작 후 className 만들기*/
.end{
	opacity: 1;
    /* 3. className에 transition 속성 추가하기*/
    transition: opacity 0.5s;
    /* transition 애니메이션 주는 스타일 : opacity가 변경될때 0.5초에 걸쳐서 변경해주세요*/
}

funtion TabContent(){
	return(
    	/* 4. 원할때 2번 className 부착하기*/
        /* 내용1,2,3에 각각 className주기 번거로우니까 div로 묶고 거기에 className 부여*/
		<div className="start end">
        	{[<div>내용1</div>, <div>내용2</div>, <div>내용3</div>][tab]}
        </div>
    )
}

tab state가 변할때 end 부착하기

function TabContent({ tab }) {
	// tab state가 변할때 end부착
	let [fade, setFade] = useState("");

	useEffect(() => {
		//fade라는 변수를 end로 바꿔주세요 라는 코드를 넣기 // className의 fade가 그러면 end로 바뀌게 된다
		// tab state가 변할때 "end를 뗐다가" 부착하기
		// 단, clean up function이 실행되고 setFade('end')가 실행되기까지 텀을 조금 주기
		let a = setTimeout(() => { setFade("end"); }, 100); // 0.1초 후에 화살표 안의 함수를 실행해주기
		return () => {
          	clearTimeout(a); // 타이머 함수 종료
			// clean up function
			// useEffect 실행전에 하고 싶은 코드
			setFade("");
		};
	}, [tab]);

	return (
		// <div className=`start ${fade}`>
		<div className={"start " + fade}>
			{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]}
		</div>
	);
	//tab이 1이면 내용1이 보이고 2면 내용2가 보이고...
}

위와 같이 해야하는 이유

• react 18버전이상에는 새로운 기능하나가 추가 됐다
• 리액트의 automatic batching 기능
  변경하는 함수들(state set함수)이 근처에 있다면 모두 하나로 합쳐서 딱 한번만 실행해준다
• 정확히 말하면, state변경함수를 쓸때마다 재렌더링을 하는게 아니라 state변경이 다 되고 나서 마지막 한번에 재렌더링을 시켜준다
• 그래서 아래의 코드처럼 코드를 짜면 한번에 state를 변경하려고 한다.
• 즉, setFade('')를 제일 먼저 공백으로 바꿨다가 setFade('end')로 바꿔주세요라는 의미인데 그냥 한번에 처리해버린다
• 그래서 위의 코드처럼 시간차를 두면 나중에 실행할 수 있으니까 의도대로 동작하게 된다

useEffect(()=>{
	setFade('end')   // 위 아래의 setFade를 모두 하나로 합쳐서 딱 한번만 실행
  
  	return()=>{
		setFade('')  
	}
}, [tab])