사라지는 모달창 만들고 기뻐했던것도 잠시였다...
CSS의 애니메이션을 이용하면 setTimeOut을 이용한 사라지는동작..계속리렌더링되는 비효율적인동작이 필요없어진다.
하나더! setTimeout을 남발하게되는데 setTimeout은 컴포넌트 생명주기가 끝난후에 제거해주어야한다. 그렇지 않으면 계속싸여서 리소스를 낭비하게 되는 결과를 초례한다. 이들을 해결하기 위한 방법공부!

애니메이션

다양한 옵션!
animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한 번에 지정할 수 있음
animation-name : 애니메이션의 중간 상태를 지정하는 이름. @keyframes 블록에 작성
animation-duration : 한 싸이클의 애니메이션이 재생될 시간 지정
animation-delay : 애니메이션이 시작을 지연시킬 시간 지정
animation-direction : 애니메이션 재생 방향을 지정
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정
animation-play-state : 애니메이션을 재생 상태. 멈추거나 다시 재생 시킬 수 있음
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정
animation-fill-mode : 애니메이션이 재생 전 후의 상태 지정
keyframes 설정후 적용

//방법1
const softRemove = keyframes` //  keyframes 만들어서 (from,to 나 0%~100%까지 구간을정할수도있다.)
20% {
  opacity: 1;
}
100% {
  opacity: 0;
  display:none:
}

const FeedbackContainerStyle = styled.div`
  ...
  animation: ${softRemove} 1s; // keyframes 속성을 담고있는 변수를 사용
`;

//방법2
const FeedbackContainerStyle = styled.div`
  ...
  animation: softRemove 1s;

  @keyframes softRemove { // keyframes 속성을 상속하는방법
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
`;

clearSetTimeout

useEffet (()=>{
  const timeout = setTimeout(()=>{ // setTimeout의 반환값은 timeoutID는 양의 정수로서 setTimeout()이 생성한 타이머 식별에 활용된다.
    console.log('timeout')
  },1000)
  return () => clearTimeout(timeout) // 생애주기가 끝나면 해당하는 타이머를 제거한다.
},[])