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 아무리봐도 그냥 공식문서가..