회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각
웹개발_React(SPA, Router) 수업 후기
오늘 React의 SPA와 Router를 공부하며 대표적으로 알고있는 React 기반의 개발사이트들이 왜 React를 기반으로 만들어지게 되었는지 알게되는 시간이였고 조금은 웹개발방식의 틀이 보이는거같았다.
그전에는 막막하기만 했던 사이트나 페이지 개발들이 React와 다른 라이브러리들을 통해 보다 더 효율적이고 편리하게 만들 수 있다는것을 실감할 수 있었다.
기억나는 단어들 나열해보기
- SPA
1) Wireframe - Router
1) Browser Bouter, Routers, Router, Link
1. SPA란?
SPA란 웹페이지의 규모가 커지고 사용자와의 상호작용이 많아지면서 발생하는 문제들을 해결하기 위해 등장했다.
전통적인 웹사이트는 페이지 이동시 매번 페이지 전체를 불러와야만 했다.
앞서말한대 웹페이지의 발전으로 중복되는 요소들을 매번 불러오는것이 서버와 불필요한 트래픽을 발생시켰고 사용자 입장에서는 반응이 느려짐을 느껴 어려임이 있었다.
하지만 SPA는 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다.
즉 SPA는 서버로부터 완전히 새로운 페이지를 불러오는것이 아닌 업데이트에 필요한 데이터만 서버에서 전달받아 그 부분만 브라우저에 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말한다.
따라서 SPA는 많은 장점이 있으며 이러한 방식으로 만들어진 대표적인 서비스로 Youtube, facebook, Gmail, airbnb, Netflix가 있다.
반면 단점으로는 JS파일이 커지며 JS파일을 기다리는 시간으로 첫 화면 로딩 시간이 길다.
검색 엔진 최적화에 좋지 않은 단점이 있다.
따라서 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야한다.
SPA에서도 이를 대응할 수 있도록 발전하고 있어 점차 이 단점은 사라지는 추세
또한 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야하기에 개발의 복잡도가 더욱 늘어난다는 단점이 있다.
1) Wireframe?
앞서 React에서 컴포넌트를 배웠다. Wireframe을 통해 컴포넌트를 어떻게 나누어야하는지 알아볼 수 있다.
Wireframe은 디자인이 들어가기 전 단례로 선을 이용해 윤곽선을 잡는것으로 한마디로 틀을 잡는것이다.
이후 페이지를 만들기 전에 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상해야한다.
React개발자라면, 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 유기적으로 주고받을 수 있도록 설계해야한다.
이때 React Router를 활용할 수 있다.
2. Router란?
Routing이란 다른 주소에 따라 다른 뷰를 보여주는 과정, 경로에 따라 변경한다라는 의미이다.
React SAP에서는 경로에 다라 다른 뷰를 보여줄 수 있다. React Router라는 라이브러리를 사용해서 SPA개발을 많이한다.
예를들어 Twitter와 같은 SPA를 만든다고 할때,
메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요하게 된다.
하지만 React 자체에는 이것을 보여줄 수 있는 기능이 내장되어 있지 않기 때문에 주소마다 다른 뷰를 직접 보여줘야 한다.
이때 사용하는 라이브러리가 Router이다.
1) React Router 주요 컴포넌트?
React Router 라이브러리를 사용하는 주요 컴포넌트가 있다.
라우터 역할을 하는 Browser Router,
경로를 매칭해주는 Routers & Route
그리고 경로를 변경하는 Link이다.
이 컴포넌트들을 사용하기 위해서 그림에 보이는거처럼 라이브러리에서 따로 불러와야한다.
위 그림을 참고해보자.
1) browser Router를 상위에 작성해야 그 안에 컴포넌트들을 사용할 수 있다.
2) Routers 컴포넌트는 여러 Route 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다.
Routers를 사용하지 않으면 매칭되는 모든 요소를 렌더링 한다.
3) Route 컴포넌트는 path 속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄지 정하며
Route태그 안에 element 속성으로 연결하고자 하는 컴포넌트를 넣어줘야 한다.
(Link 컴포넌트가 정해주는 URL경로와 일치하는 경우에만 작동함)
만약 사용자가 지정한 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을것이다. 이때 path="*"속성을 사용해서 지정되지 않은 주소로 접근할시 이 속성이 설정되어 있는 컴포넌트를 보여주게 할 수 있다.
4) Link 컴포넌트는 페이지 전환없이 애플리케이션을 그대로 유지하여 페이지 주소만 변경해 준다.
(a 태그는 사용시 새로고침 현상이 일어나기때문에 Link를 사용)
Link의 to 속성을 활용하여 Route 컴포넌트에 설정해준 path 주소를 연결하면 된다.
오늘은 React에서 처음으로 라이브러리를 사용해보았다. 아직 정확히 사용할 수 있진 않지만 생각보다 어렵지 않았고 앞으로 남은 시간동안 더 많은 라이브러리를 다루어보며 익숙해져야겠다. 벌써 내일 금요일이고 한주가 다 갔다. 이번주는 비동기라는 어려움 개념으로 힘든 한주였는데 이번 한주 잘 마무리 해야겠다. 화이팅!!
