[React] SPA, Router, Navigate, Nested Routes, styled-components 공부

SPA (Single Page Application)

SPA란? 

• 싱글 페이지 어플리케이션
• SPA는 하나의 html 파일로 다양한 컴포넌트들을 불러와 페이지간의 로딩이 없는 페이지를 말한다.
• 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번 다운로드 하고 이후 새 페이지 요청 시
• 갱신에 필요한 최소한의 데이터만을 전달받아 갱신을 한다.

 

• SPA가 등장하기 이전에는 SSR ( 서버 사이드 렌더링 )가 있는데 화면에 보여질 리소스를 서버로 요청하고
• 서버로 부터 받아온 리소스를 렌더링 한다.

SPA의 장점

• 새로운 페이지 요청 시 전체 렌더링이 아닌 부분 렌더링이기 때문에 전체적인 트래픽 감소, 렌더링에 좋은 효율
• 빠른 화면 이동
• 앱처럼 자연스러운 사용자 경험을 제공한다. -> 모바일사용이 늘어남에 따라 SPA의 장점 극대화
• 모듈화와 컴포넌트별 개발이 용이하다

SPA의 단점

• 정적 리소스를 처음에 모두 다운로드 하기 떄문에 초기 구동 속도가 느리다.
• SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데 해당 로직은 JS를 통해 구현되므로 보안적 이슈가 있다.
• 검색 엔진 최적화가 어렵다. 
  • 대부분의 크롤러가 html을 파싱해서 정보를 만드는데 SPA는 html에 js 비동기 통신 모듈을 사용하는 방식이라
  • 크롤러들이 제대로 인덱싱을 하지 못한다.

 

 

Router

 

사용목적

• URL 간의 이동, 컴포넌트간의 이동을 만들기 위함

사용방법

• npm install react-router-dom 
• 해당 명령어를 터미널에 입력하여 패키지 설치

사용함수

• Routes, Route, Link, useNavigate, Outlet, useParams
  • Routes
    • Route들을 감싸는 ul, li 와 같은느낌으로 사용
  • Route
    • <Route path="/home" /> 방식으로 사용
    • <Route path="/home/:id" />  - url 파라미터를 받아와 사용할 수 있다
    • <Route path="/home> 

 

 

Nested Routes

<Route path="/about" element={<About /}>
	<Route path="one" element={<div> 테스트 1</div>}
	<Route path="two" element={<div> 테스트 2</div>}
</Route>

function About() {
	return (
	<div>
		<h2> 어바웃 </h2>
		<Outlet />
	</div>
    )
}

 

• /about/one 형태로 사용 가능하다.
• 단, 테스트 1 이라고 적힌 문법을 사용하기 위해서는
• about 컴포넌트 내부 <Outlet /> 컴포넌트가 필요하다

 

path *, Link

<Route path="*" element={<h1> 잘못된 페이지 입니다. </h1>} />

• Route 이외의 URL 입력 시 404 페이지 대신 해당 페이지 출력

<Link to="/"> 홈 </Link>

• a 태그와 유사한 방식으로 사용할 수 있는 Link 컴포넌트

 

 

 

useNavigate()

let navigate = useNavigate()
/////
<button onClick={() => { navigate('/') }} 홈 <button>
<button onClick={() => { navigate(-1) }} 뒤로가기 <button>

• 버튼 클릭 시 태그 안에 navigate 속성을 부여할 수 있음
• 링크 대신 -1을 적용한다면 뒤로가기 효과

 

styled-component

사용방법

• npm install styled-components 패키지 설치
• import styled from 'styled-components' // import

사용이유 & 장점

• css 파일 까지 안가고 js 파일 내부에 세팅할 수 있어 편리하다
• styled-component로 작성한 스타일은 다른 js 파일을 간섭하지않는다.
  • App.css 내부 작성 시 빌드할때 모조리 합쳐지기 때문에 App.css가 다른 js도 간섭을 하지만
  • styled-component로 작성한 css는 해당 js 파일만 간섭하기 때문에 오염도가 적다.
• 단, App.css 를 App.module.css 로 이름을 변경하면 App.js 에만 간섭을 한다
• css 파일을 생성하는 것 보다 styled-components 파일을 사용하는 것이 더 빠르다
  • styled-components는 html 내부 <style> 태그를 생성하는 것이므로 단일 파일로써 빠르다.
• styled-component는 자체적으로 props를 사용하여 재사용성이 뛰어나다.

단점

• styled-component 를 무분별하게 사용한다면
• 코드 내부 이것이 styled-component 인지, js component 인지 ... 점차 복잡해진다.
• 해당 styled가 마음에 들어 다른 곳에 사용하려면 import를 해야하는데 그럼 그냥 css 만드는게 낫다.
• 프로젝트 협업 시 css 담당이 있을 경우 styled components 를 사용하여 문제를 유발시킬 수 있다.

 

사용방법

let YellowBtn = styled.button`
	background : ${props => props.bg};
	color : ${ props => props.bg == 'blue' ? 'pink' : 'black' };
	padding : 10px;

`

let NewBtn = styled.button(YellowBtn)``

let BlackBox = styled.div`
	background : black;
	padding: 20px;
	width: 25px;
	height: 25px;
`

1.  변수 안에 넣어 컴포넌트 형식으로 사용가능
   1. ${props => props.bg} 형태로 props를 사용가능
   2. 삼항연산자로 조건 연산 가능
2.  styled.button(YellowBtn) 식으로 같은 파일 내부 재사용 가능