[React] 컴포넌트(Component) Fade In/Fade Out 구현

Fade In / Fade Out 을 구현해보자

 

1. 소스코드

 

2. 설명

 z-index 때문에 반드시  visibility: hidden;  적용이 필요한 상황. 결론부터 말하자면  transition: all 0.2s linear 0s;  처럼 사용하면 된다. 이 때 가장 마지막에 오는 시간은 animaition-delay 에 사용되는 시간이다. 1s 로 설정 시 1초 뒤에 애니메이션이 실행된다. 검색해서 찾아보니  transition: opacity 0.2s visibility 0.2s;  같은 형식으로 사용하면 적용될거라 하던데, 막상 해보니 그냥 툭 하고 사라지며 애니메이션이 먹히지 않았다.

 

 useState를 사용하여 true/false 값에 따라 className을 분기처리 한 내용은 너무나도 당연한 부분이니 굳이 설명하지 않고 넘어가도록 하겠다. 햄버거 버튼이 컴포넌트 밖에 있는 구조라서, 컴포넌트에선 useState를 props받아 사용했다. 참고로 컴포넌트를 useState에 따라  {useState ? <Components /> : null}  과 같은 방식으로 사용하면 당연하게도 CSS 따위 적용되지 않는다. 태그를 지워버리는데 CSS가 먹힐리가.