"SPA 그 다음은 과연 뭘까요..?"
오늘은 React 에 더하여 React Router 을 활용한 SPA (Single Page Application) 를 배웠습니다. 전통적인 웹사이트가 매번 페이지 전체를 새롭게 불러왔었다면, 오늘날 웹앱으로 불리는 대부분의 웹사이트들은 SPA 를 통해 중복되는 요소를 제외하고 필요한 부분만을 불러오는 식으로 작동합니다.
SPA 는 전체 페이지를 렌더링하지 않기 때문에 기본적으로 속도가 빠르고 서버의 과부하를 현저히 줄일 수 있다는 장점이 있지만, 반대로 무거운 자바스크립트 파일을 불러와야 해서 첫 로딩이 느려진다는 단점이 있기도 합니다.
리액트 라우터는 이런 SPA 가 가능하도록 컴포넌트를 연결해주는 역할을 합니다. Switch 와 Route 를 이용해 경로를 지정해 변경하고, Link 로 경로를 매칭합니다. 그리고 이 전체가 구동되도록 하는 BrowserRouter 가 있죠.
HTML 태그의 개념을 빌려와 지금까지 이해한 것을 풀어보자면, Switch 가 부모 태그가 되고, 자식 태그로 Route, 손자 태그로 Route 에 대응하는 컴포넌트가 위치합니다. 이 때, Route 에 대응하는 컴포넌트들이 사용자의 반응에 따라 변화하고, Switch 의 공간에서 변화합니다.
<Switch>
<Route exact path='/'>
<Home />
</Route>
<Route path='/away'>
<Away />
</Route>
<Route path='/ground'>
<Ground />
</Route>
</Switch>위와 같이 작성했다면, / 라는 path 를 가지는 Route 에 대응하는 것이 Home 컴포넌트이고, /away 에 Away 컴포넌트, /ground 에 Ground 컴포넌트인 것인데요. 이 요소들이 상위에 있는 Switch 가 위치한 공간에서 새롭게 렌더링된다는 것입니다.
리액트를 새롭게 배우는 중이지만 그 기본이 Javascript 와 HTML 에 있는 만큼 HTML, CSS, Javascript, 이 삼총사에 대한 이해가 충분할수록 리액트에 대한 이해도 조금은 더 쉬워지는게 아닐까 싶습니다. 밀리지 않고 진도를 맞추려면 예습이 필요해 보이는데, 정작 복습해야 할 것들도 쌓여만 가네요. 월화수목금금금 입니다.
