[React] react-router실험

1. react-router-dom

리액트에서는 클라이언트 단에서 routing을 자유롭게 해주기 위해 react-router-dom이라는 라이브러리를 제공하는데 

대부분의 리액트 웹사이트를 보게 되면 가장 위의 App.tsx 파일에서 라우팅을 세팅해주고 Link component를 통해 페이지 별 이동을 제어해준다. 

 

기본적인 내용은 가장 최상위 app의 모든 라우팅을 담고 있는 App.tsx에서는 다음과 같이 설정이 되어 있어야한다는 것이다. 

위를 확인해보면 BrowserRouter컴포넌트 안에 Routes컴포넌트들이 들어있고 Route컴포넌트 안에 주소와 해당 주소로 이동했을 때 불러올 element를 설정해준다. 이 element는 우리가 만든 page가 되겠다. 

 

---

2. 실험 내용

나는 div태그 하나를 BrowserRouter 컴포넌트 와 Routes 사이에 넣어볼 것이고 Routes안에 넣어볼 것이다. 이 때 화면이 어떻게 변하는 지를 테스트 해 볼 생각이다. 

 

우선 다음과 같이 BrowserRouter밖에 div태그가 존재하는 경우이다. 

 

다음과 같이 localhost:3000/주소에 Home!이 뜨는 것을 확인할 수 있다.  만약 이 경우에 다른 주소로 이동하면 저 Home은 계속 남아있을까?

놀랍게도 남아있는 것을 확인할 수 있다. 

---

3. 실험 내용 2

이번엔 BrowerRouter컴포넌트 안 Routes컴포넌트 밖에 div태그를 넣어볼 것이다. 

다음과 같은 위치에 div태그가 존재할 때 화면은 어떻게 될까?

localhost:3000/ 주소에서는 여전히 Home!이라는 문구를 보여주는 것을 확인할 수 있다. 그렇다면 다른 주소는 어떨까?

다른 주소에서도 여전히 Home이라는 문구를 보여주고 있다. 

---

3. 실험 내용 3

여기서는 Routes캄포넌트 안에 div 태그가 존재하고 있다. 

Routes컴포넌트 안에 존재할 경우 에로가 뜬다. 

에러를 살펴보니 div태그는 Route컴포넌트가 아니기 때문에 Routes컴포넌트의 children이 될 수 없다고 한다. 

---

4. 결론

App.tsx에서 라우팅 구성조건은 다음과 같다. 

아까 실험을 통해 Routes컴포넌트 안에는 Route컴포넌트 외에는 다른 컴포넌트가 들어오지 못한다는 사실을 알게 되었다. 따라서 모든 페이지에 적용되어야 하는 레이아웃의 경우 BrowserRouter안에는 존재해야하고 Routes컴포넌트 밖에 존재해야한다. 따라서 다음과 같은 형식으로 App.tsx를 설정해주면 된다.