🍰 [SEB FE 41기] 하루 일기 - 22.09.29

 

오늘 배운거,,, 정말 짱 재미있었다 히히...ㅋㅋㅋㅋㅋ

어제 크루님이 React SPA 정말 재밌을거에요~ 라고 하셨는데 어제는 SPA가 뭔지도 몰랐고 리액트 자체가 낯설었으니까 완전 겁 먹었지만

막상 오늘 직접해보니 이거...정말 재밌는걸...?

 

SPA

SPA는 Single Page Application의 약자로, 페이지의 컴포넌트들을 갱신할 때, 필요한 데이터만 받아서 페이지를 업데이트 하는 웹 애플리케이션 또는 웹 사이트를 의미한다.

과거의 웹 사이트는 페이지를 갱신할 때 HTML을 계속해서 새로 불러와야 했기 때문에 불필요한 트래픽이 발생했고 반응성 또한 느렸다. 당연히 UX도 안좋았겠지?

 

그걸 개선한 것이 지금의 SPA 형태!

 

React Router

리액트를 이용해 SPA를 구현하기 위해 React Router 라이브러리를 설치하여 사용해야 했다..

컴퓨터 용어로 자주 들어본듯한 라우터는 주소에 따라서 그 주소에 알맞은 뷰를 보여주는 역할을 한다. 리액트의 내장 기능이 아니라서 따로 설치해주었어야 했고..

 

React Router에 포함된 주요 컴포넌트 중 오늘 사용한 것은 <BrowserRouter>, <Routes>, <Route>, <Link>였다.

(라이브 시간에 강사님이 추가로 useNavigate 사용하는 것도 보여주셨다!)

 

<BrowserRouter>는 일반적으로 가장 최상단에 모든 컴포넌트를 감싸주는 형식으로 사용되고 이 페이지에 라우터의 기능을 심어주겠다! 라는 역할을 한다.

<Routes>는 <Route>들을 감싸는 컴포넌트로 <Route>들 중 경로가 일치하는 라우터만 렌더링시켜준다. <Routes>를 사용하지 않을 시 매칭되는 모든 요소를 렌더링해준다고...

<Route>는 path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 결정하는 역할을 한다. 컴포넌트 지정은 element={<컴포넌트 />}

<Link>는 <Route>에서 지정한 path를 연결해주는데 페이지를 새로 불러오지 않고 주소만 변경해준다.

 

암튼 정말 짱 신 기~

 

과제로 직접 해당 컴포넌트들을 사용하는 작업을 거쳤고, 어제 학습했던 fontawesome 아이콘 넣기나, 원하는 데이터만 매핑해서 뽑아오기 등의 테스트도 진행하였다. 지난 아고라 스테이츠 과제에서 결국 페이지네이션을 만들어내지 못했는데 리액트 사용하면 보다 쉽게 만들어 낼 수 있을 것 같아서 아주 기대된다 ㅎㅎㅎ (이래놓고 또 구현 못하면 마음이 아프지...)