이벤트 발생 시 특정 컴포넌트를 다른 컴포넌트로 바꾸는 방법

개인 프로젝트를 하고 있을 때였습니다. 

'이 버튼을 누르면 다른 페이지가 아니라 다른 컴포넌트가 보였으면 좋겠는데 어떻게 해야하지?'

다른 페이지로 이동하는 것은 React router의 useNavigate()를 사용하면 된다고 배웠는데, 컴포넌트만 교체하려면...?

난감했지만 저에겐 든든한 선생님이 있습니다. 

든든한 나의 선생님! 가끔 틀릴 때도 있지만..

useState를 사용해서 조건에 따라 렌더링하는 방법이 있군요. 

그리고 router를 사용하는 방법은 다른 페이지로 바꾸는 방법을 알려주는 것 같아요.

MainAdBox부터 list까지의 내용을 바꾸고싶어요.

제가 하고싶은 것은 Category/Review/Exhibition 버튼을 눌렀을 때, 페이지를 바꾸지 않고 버튼 하단의 내용들을 교체하는거에요.

어떻게 해야하지.. 하다가 멋사 같은 팀의 멤버분께 여쭤봤는데요.

여담인데, vscode의 CodeSnap extention을 사용하면 예쁘게 코드의 스크린샷을 찍을 수 있답니다.

<Routes> 태그 바깥쪽의 내용들은 그대로 유지되면서, 페이지가 바뀌는겁니다. 

그러니까, <Logo>와 <Footer>는 바뀌지 않고, <Routes>로 감싸진 부분만 바뀌는거였어요.

사실 그걸 은연중에 인지하고 <Footer>태그를 <Routes>태그 바깥에 놓은거였어요.

간단한 방법이 있는데, 심지어 (얕게나마)알고있는데 괜히 여쭤봐서 죄송스러웠어요.

제가 아직 React를 많이 써보지 않아서 익숙하지 않은가봅니다.

혼자서 이것저것 많이 만지작거리면 어떻게든 해결되겠죠. 그쵸?

 

그래서 결론은, url을 통해서 페이지를 바꾸는걸로 정했답니다.

부끄러워서 포스팅하던걸 지워버릴까 고민했는데, 내 입맛대로 기록하면 의미가 없는 것 같아서 기록합니다. 

다음부턴 안그러면 되는거죠, 뭐.