React2 [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을 분기처리 한 내용은 너무나도 당연한 부분.. 2022. 8. 3. [React] Modal 만들기 (React-Modal 사용 X) React에는 React-Modal 이라는 라이브러리가 존재한다. 그런데 사용법을 익히기도 귀찮았고(무엇보다 문서가 없었다), CSS 적용하기도 어려워서 그냥 직접 만들기로 했다. 생각보다 어려운 작업이 아니었다. 약간의 CSS 지식만 있다면 빠르게 구현할 수 있을 정도의 수준이지만, 이번 게시글에선 그 조차도 쉽게 설명해서 모두가 이해하도록 해보겠다. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import Main from './components/main'; import './index.css'; ReactDOM.render( , document.getElementById('root') ); App.js 사용하지 않았다.. 2022. 2. 26. 이전 1 다음
