History

리액트

리액트-route transition animation (2)

리액트-route transition animation (1) 밴드부 티켓 예매를 거의 휴대폰으로 할테니 웹이어도 앱느낌이 나게끔 기획을 했었다. 레이아웃을 휴대폰 레이아웃에 고정시키고 , 일정 범위 이상 화면이 크게되면 , 레이아웃이 더이상 늘어 devnm.tistory.com 전편을 안보고 오신분들은 전편을 보고오시라. 우선 이글을 통해 얻어갈 수 있는 것들을 알려주겠다. 전역 history 객체를 이용해 history.listen 이벤트를 설정하는 방법 이벤트를 통한 redux에 pathname 을 저장해 , 이전 패스와 비교하는 방법 저장된 pathname을 통해 바뀐값을 비교하여, 애니메이션 방향을 결정하는 방법 TransitonGroup 의 childFactory 속성을 이용해서 classNa..

리액트

리액트 react-router-dom v6 react context 밖에서 history.push 하기

react-router-dom v6로 업그레이드 되면서 switch 가 routes로 바뀌고... 뭐든 옛날 소스를 절대로 가져다 쓸수 없는 상황이 되었다. 가장 불편했던점은 공식문서나 어디에서도 history 객체를 전역으로 가져와서 액션이든 어디든 react element 밖에서 쓸 수 없던 상황이였다. 물론 action에 callback으로 navigate를 넘겨서 처리하는 방법이있지만, 그건 뷰에 로직이 포함되 너무 깊게들어가버리는 상황이다. 이글을 통해 얻을 수 있는 점 react-router-dom v6 에서 history 객체를 전역으로 선언하는 방법 react-router-dom v6 에서 histroy 객체를 전역으로 받아 push 하는 방법 history GitHub - remix-ru..

ImNM
'History' 태그의 글 목록