그냥 클릭할 때 애니메이션 넘기면서 조작하는 거야 아주아주 쉽지만, url params를 바꿀 때 애니메이션과 함께 넘어가는 건 한 번 생각해볼만 하다. 간혹 이런 사이트들이 있다. https://pvoznyuk.github.io/react-update-url-on-scroll/ react-update-url-on-scroll pvoznyuk.github.io 스크롤을 내릴 때 url params가 바뀌는 웹사이트들이 종종 있다. 회사의 소개 페이지나 포트폴리오 관련 페이지들이 종종 그러는데, react-router v5 시절에는 hashRouter를 이용해서 간단하게 구현이 가능했지만.. 이제 없어져버렸다. router 설정도 결국엔 body 태그 하단의 JSXElement를 모두 바꿔주는 역할이기 때..

NavLink라는게 있는지도 몰랐는데 이런 유용한게 있었다니... 그냥 Link와 같은데 NavLink는 active라는 기능을 지원한다. 구현이 그렇게 어려운 건 아니지만, 매번 params나 location을 가져온 다음에 파싱해서 bold처리 하는게 여간 귀찮은게 아니다. (styled-component를 사용한다면 props도 넘겨줘야한다. 아니면 뭐 인라인으로 toggle하거나) NavLink를 사용한다면 그냥 이렇게 해주면 된다. isActive ? "selected" : ""} to={`/workspace/${workspace}/dm/${member.id}`}> {children} 패키지를 뜯어보면 이렇게 되어있는데, className, style, children에 각각 isActive가 ..

웹을 만든다면 동적으로 URI를 만들어줘야하는 경우가 종종 생긴다. React에서도 URI에 있는 특정 params나 id를 읽어와서 그에 맞는 적절한 컴포넌트를 보여주는게 가능하다! 라우터 구조 설계로 같은 레이아웃에 보내고, 그 레이아웃 안에서 다른 컴포넌트를 보여주는 건 생각지도 못한 방법이었는데 되게 효율적인 것 같아서 공유해볼까 한다. 1. 라우터 설계 먼저, 라우터 구조를 설계해야한다. react-router-dom이 작년 11월에 v6가 되었는데 아직도 블로그나 강의 자료들이 v5기준으로 되어있는 곳들이 많다. React Router | Tutorial Declarative routing for React apps at any scale reactrouter.com 아무리봐도 그냥 공식문서가..