회사 리스트를 보여준 뒤 회사의 이름을 클릭하면 해당 회사의 상세 정보를 보여주는 페이지로 라우팅 시키는 기능을 개발하던 도중 라우팅을 구축하기 위한 모든 코드는 짰는데 다음과 같이 url만 바뀔 뿐 해당 컴포넌트로 라우팅이 안되는 이슈가 발생했다.
전에도 이 문제로 2시간 가량을 끙끙댔었다가 어떻게 풀었었는데 다시 이 이슈가 발생하니 순간 당황했다.
일단 App.tsx 에서 Route는 다음과 같았다.
Companies 컴포넌트에서 클릭 이슈가 발생했을 때 CompanyInfo로 라우팅 해야한다.
코드도 제대로 짠 것 같은데 도대체 왜 안되는지 점점 답답하기 시작할 때 머릿속에 컴퓨터가 코드를 읽는 방식이 주마등처럼 스쳐갔다.
코드는 위에서 아래로, 왼쪽에서 오른쪽으로 읽으니까...
이 생각을 기반으로 다음과 같이 코드를 변경해봤다.
그냥 순서만 바꾼거다. 라우팅 될 CompanyInfo를 Company보다 위에 선언해줬다.
하.. 감격스러웠다
두 줄 소개