[엘리스 AI트랙] 04-02-01 ~ 04-02-02 React 기초 3

TIL은 오늘 하루 새롭게 알게 된 내용 위주로 작성하고 있어요 ✏️

 

1. form 태그 작성할땐 type들을 잘 작성해주는것이 좋다

 

2. 함수가 선언됐는지(존재하는지) + 타입 확인을 한번 더 함으로써 에러 방지!

if(typeof onInsert === "function" && inputValue) {
// onInsert가 정상적인 함수인 지 확인하여 에러 방지
	onInsert(inputValue);
}

 

3. 리액트에서 style은 object로 표현해야한다

<div className="greeting" style={{ padding: 10, color: 'red'}}>
	{name}님 안녕하세요 <br />
    반갑습니다.
</div>

• 위와 같은 inline style의 property name은 camelCase로 적는다
• 첫번째 중괄호는 자바스크립트 표현을 사용하겠다는 의미
• 두번째는 object의 중괄호

 

 

SPA와 라우팅

Single Page Application

• 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식

SPA	MPA
전체 웹앱을 JS만으로 구성, 첫 요청 시 빈 페이지를 받게 됨	미리 서버에서 전체 페이지를 빌드해 브라우저로 전송 ➡️ 캐싱 불가능
여러 페이지를 하나의 앱의 구성 요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용 하는 방향으로 구현	페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간 데이터를 재활용하기 힘듦
Client-side routing 기술을 활용, 페이지 진입 시 리로드 없이 라우팅	서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달
AJAX를 활용해 페이지 이동 시 서버에 데이터만 요청하여 JS로 페이지를 만듦	서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리

• SPA의 장점
  • 서버에서 페이지를 만들 필요가 없기 때문에 CDN에 캐싱 가능
  • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어듦 (제약 조건 줄어듦)
  • 웹 사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 SW 설계(ex: 상태관리, 라우팅, 컴포넌트 재사용, Hook 등...)와 패턴 적용 가능
• SPA의 단점
  • SEO에 불리함
  • 하나의 JS 앱이 지속하므로, 메모리 관리와 성능, 데이터 활용 등이 중요
    • 페이지가 리로드 되지 않으면 페이지가 뜬 상태로 유지되기 때문에
  • 여러 페이지를 전송받는 것보다, 하나의 거대한 JS 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐
    • 코드의 양을 줄이고 필요할때만 코드를 로딩하는 lazy loading 등의 처리를 통해 페이지 전송을 빠르게 할 수 있음
• SPA에서 라우팅이 왜 중요하냐면...
  • 유저가 다른 페이지로 이동했을 때, reloading이 없어야하기 때문에
  • 라우팅 라이브러리는 reloading을 없애는 근원적인 기술
  • 주로 History API or URL Hash를 이용해 페이지 리로드 없는 페이지 전환을 구현
    • 요즘에는 Hash 방식보다 History API를 통해 편리한 라우팅을 구현할 수 있음