일단 Doit

고정 헤더 영역

글 제목

메뉴 레이어

일단 Doit

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기
    • Typescript
    • 최적화
    • Git
    • Vue
    • React
      • Router
      • typescript
      • TDD
      • Recoil
    • 경제

검색 레이어

일단 Doit

검색 영역

컨텐츠 검색

팝업

  • React Transition Modal 적용

    2023.01.27 by 일단두잇

  • React Popup(팝업) 생성하기

    2023.01.25 by 일단두잇

React Transition Modal 적용

CSSTransition을 사용하면 팝업에서 Transition 효과를 적용 할수 있습니다. https://reactcommunity.org/react-transition-group/transition React Transition Group A function child can be used instead of a React element. This function is called with the current transition status ('entering', 'entered', 'exiting', 'exited'), which can be used to apply context specific props to a component. {state => ( )} reactcommunity.org ..

React 2023. 1. 27. 17:53

React Popup(팝업) 생성하기

1. 팝업 Component 생성 - props로 해당 Component에 값을 전달 - 여기서는 onClosed 함수를 전달하여 뒤로가기 버튼을 눌렀을때 이벤트를 전달해줍니다. export default function PopupTodo(onClosed) { return ( 팝업 Todo 할일1 할일2 ); } 2. 부모 Component에서 팝업 제어 - state를 사용하여 팝업 Component를 제어 합니다. - true : mount, false : unmount - onClosed 이벤트를 전달받아 해당 state를 false로 변경합니다. export default function HomePage() { const [isShowPopup, setShowPopup] = useState(fal..

React 2023. 1. 25. 16:52

추가 정보

반응형

인기글

최신글

페이징

이전
1
다음
TISTORY
일단 Doit © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바