하나의 페이지로 동작하는 SPA(Single-Page Application)는 현재의 페이지를 동적으로 다시 작성하는 방식의 웹 어플리케이션 이나 웹사이트를 말한다.
큰 단점이 있다면, 주소가 없어 특정 페이지에 접속하기 어려웠다.
이 단점을 해결하는 SPA 방식의 프레임워크를 예를 들면, 앵귤러는 SPA 방식을 살리면서 라우팅 기능을 가지고 있다. (프레임워크이기 때문에 기본 기능이다)
리액트의 경우는 View 만 담당하는 라이브러리이기 때문에, 우리는 react-router를 따로 설치해서 사용하고 있다.
리액트 개발자라면 당연히 알고 있겠지만, 예시코드를 한번 보자면
일반적으로 아래와 같이 Route를 따로 모아, 한 파일에서 관리한다.
출처: 나의 첫 리액트 프로젝트 Routes.js
간단하게 라우트의 역할과, 리액트에서 사용하는 라우트의 형태를 살펴보았다.
간단한 배경지식을 살펴보았으니,
이번 포스팅의 주제인 서브라우트(sub route)에 대해서 본격적으로 살펴보자.
일단 서브라우트 말 그대로, 하위(下位) 라우트라는 뜻이다(?)
Component
말 그대로 하위 라우트가 머야... (나도 사실 처음엔 이해하기 어려웠다.)
이 말을 이해하기 위해서 먼저 라우트가 어떤 형태로 사용되는지 알아보자.
조금 더 우리말스럽게 번역해 보면, 내부 라우트 이다.
내부 라면, 바깥이 존재하는 건가?
정답! 라우트 내부의 라우트를 만드는 것을 "서브 라우트" 라고 한다.
첫번째 제목으로 Component라고 적은 이유이기도 하다.
리액트의 가장 큰 특징으로, 우리는 컴포넌트를 만들어 관리한다.
컴포넌트는 View를 나타내는 것으로만 보통 생각하는데, 위의 Route가 사용되고 있는 모습을 한번 살펴보자.
<Route exact path="/" component={Main} />우리가 뷰를 재사용하기 위해, 컴포넌트화 시켜 import 해오는 상황을 생각해보자.
import 해서 컴포넌트를 사용하는 형태와 위의 Route를 사용하는 형태가 똑같다는 것을 알 수 있다.
즉 Route 또한 하나의 컴포넌트 라는 것을 알 수 있다.
라우트 내부의 라우트를 이제 쉽게 생각해보면, 컴포넌트 안에 컴포넌트를 하나 넣어주는 것 뿐이다.
좀 더 리액트에 맞춰 설명을 하자면, 최상단의 Route 컴포넌트가 있고, 이 Route 컴포넌트의 역할은 해당 URL과 일치하는 View를 보여준다. 이 View 안에서 또 다른 Route를 선언해주는 것이 바로 "서브 라우트" 이다.
exact path / exact component
Route는 하나의 컴포넌트 개념이라는 것을 생각하면서, 하나씩 살펴보면 좋다.
사실 나도 컴포넌트는 View라는 고정관념에 빠져, 이해하기 어려웠었는데 컴포넌트의 개념을 확장하면서 쉽게 이해할 수 있었다.
서브라우트를 활용하는 방법은 다양해서 먼저는 이런 고정관념을 깨야 응용해 나갈 수 있다.
그럼 두번째 제목인 exact 를 살펴보자
exact는 뜻 그대로 정확해야 한다.
위의 Routes.js 중 하나인 exact path="/main" 이라고 되어있으면,
주어진 경로인 /main 과 정확히 맞아 떨어져야만 설정한 컴포넌트를 보여주겠다는 뜻이다.
exact의 역할을 파악했으니 이제 서브라우트가 적용된 코드를 살펴보자
서브라우트가 적용된 코드
당연 Route 컴포넌트는 import 할 것이라고 믿는다.
아래는 렌더링 되는 부분의 코드만 가져왔다.
- 출처: 현재 진행중인 프로젝트
위에서 세번째 줄을 보면
<Route path="" exact component={} /> 코드가 작성되어 있는 것을 볼 수 있다.아 서브 라우트는 가장 상단에 작성하면 되는건가? (상황에 맞추는 것!!!)
서브 라우트 또한 컴포넌트라는 것을 우리는 알고 있다.
이 뜻은 해당 URL로 넘어가면서 해당 view를 불러온다는 거지, 우리가 Routes.js 처럼 URL이 이동한다고 새 페이지를 렌더링 한다는 것이 아니다!!!!!!!
서브 라우트가 작동되는 순서를 한번 살펴보자.
- 먼저는 사용자가 주소창에 URL을 입력할 것이다.
- 그럼 Routes.js에서 주소창과 일치하는 뷰를 불러올 것이다.
- 주소창과 일치하는 뷰가 불려지면서, 렌더링 될 때 서브라우트(Route 컴포넌트)를 렌더링 할 것이다.
- 그러나! 아직은 주소창과 일치하지 않기 때문에 해당 Route 컴포넌트에 선언되있는 컴포넌트 뷰는 불러오지 않는다. (쉽게 display: none 상태)
- 주소창의 URL과 path 값이 일치하면, 서브라우트에 선언된 컴포넌트 즉 뷰 를 불러온다.
위의 순서를 통해 알 수 있는 점은 Route 라는 하나의 View가 내가 지정한 위치에 불린다는 것
즉 주소창이 바뀌면서 불려질 View의 위치를 잘 생각해서 Route 컴포넌트를 위치 시켜야 한다는 것이다.
예시 코드는 왜 메인 프레임 밖 상단에 위치시킨거야?
활용했던 방법을 프로젝트 후기를 통해 포스팅 해볼 계획이 있다. 여기서는 간단하게 얘기하자면 저 View는 모달창과 같은 역할로 사용하기 위해 작성된 코드이다.
모달창에서 통신이 필요한 경우였는데, 유저가 모달을 열지 않을 경우 굳이 통신을 할 이유가 없었다.
모달이라는 것은 같은 뷰에서 보통 이뤄지는 UI/UX 인데,
모달이 같은 뷰에 있으니까 모달에 쓰일 데이터 까지 한번에 가져와 컴포넌트를 렌더링 시켜면, 유저가 모달을 열지 않았는데도 통신을 해서 데이터를 가져와야 하는 상황을 비효율적이라고 생각했다.
또한 현재 프로젝트에서 MVVM 패턴을 적용하였는데, View Model을 따로 관리해주는 것이 효과적일 거라고 판단했다.
똑같이 했는데 작동이 안되는 이유
이번 포스팅의 Point 이자 내가 기록하고자 하는 이유이다.
나 또한 겪었던 에러이므로 포스팅을 통해 기록하고 공유하고 싶어 서브라우트를 주제로 잡은 이유도 있다.
우리는 서브라우트가 작동하는 순서와, exact를 살펴보았다.
먼저는 Route.js의 설정된 path값과 일치해야 해당 뷰를 불러오고, 그 다음 불러온 뷰에서 서브라우트를 실행하는데
여기서 잠깐!!!
- 서브라우트가 적용된 뷰가 불리는 Route가 exact 조건을 가지고 있으면 어떤 일이 생길까?
서브라우트가 작동되기 위해서는 해당 뷰가 반드시 렌더링 되어있어야 한다. 그러나 서브라우트를 작동하기 위해 url이 바뀌게 될텐데, 이때 URL이 바뀌면서 exact로 path 값이 설정된 컴포넌트(View)는 사라지게 된다 .
즉, 서브라우트를 작동하도록 되어있는 뷰의 상단 Route는 exact로 설정되어 있으면 안된다는 것!!!
아마 대다수의 분들은 당연한거 아니야? 라고 생각하시겠지만, 사실 서브라우트를 적용하는 방법이 너무 간단해서 간과하는 실수 이다.
쉽게 생각한 만큼 "도대체 왜 안되는거야" 라면서 엄한곳을 디버깅하게 되는데, 아마 실수 하는 분들 중에서 가장 많이 겪는 Error 일 것 같았다.
-끝-
