모달 fadeOut 효과주는 방법, 서서히 사라지는 모달
프로젝트가 거의 마무리 단계이다.
디테일을 잡고있다.
구현해야하는 것은 다음과 같은 모달인데 서서히 사라지게끔 하고 싶다.
구글링을 통해 코드샌드박스에 다음과 같은 hideEffec를 만들 수 있었다.
https://codesandbox.io/s/heuristic-almeida-bt1ku9?file=/src/App.js
heuristic-almeida-bt1ku9 - CodeSandbox
heuristic-almeida-bt1ku9 by ehddud1006 using react, react-dom, react-scripts
codesandbox.io
우선 만들던 중에 React 에서 바닐라 자바스크립트의 document.getElementById의 기능과 addEventListener를 사용하는 방법을 다시한번 상기시켰다. 참고 자료에 해당내용을 링크시켜놓았다.
이제 실제 프로젝트에 적용을 해볼 시간이다.
참고자료
https://stackoverflow.com/questions/29017379/how-to-make-fadeout-effect-with-pure-javascript
How to make fadeOut effect with pure JavaScript
I'm trying to make fade out effect for a div with pure JavaScript. This is what I'm currently using: //Imagine I want to fadeOut an element with id = "target" function fadeOutEffect() { ...
stackoverflow.com
Using addEventListener in Function components in React | bobbyhadz
To use the `addEventListener` method in function components in React, set the `ref` prop on the element. Use the `current` property on the ref to get access to the element. Add the event listener in the `useEffect` hook.
bobbyhadz.com
What is the equivalent of document.getElementById in React | bobbyhadz
The equivalent of the `document.getElementById()` method in React is using refs. To select an element, set the `ref` prop on it to the return value of calling the `useRef` hook and access the dom element using the `current` property on the `ref`, e.g. `ref
bobbyhadz.com