22.4.19

컴포넌트

분리해서 설계 시 각 부분을 독립적으로 만들어 재사용성을 높인다.
복잡한 웹을 작게 컴포넌트로 쪼개서 재사용성과 효율적인 관리를 갖게 한다.

규칙

• 이름은 항상 대문자로 시작한다.
  파스칼 표기법을 따름
• return() 내에 있는 것은 태그 하나로 묶어야 한다.

return (
	<div>
    	<Hello/>
    </div>
);

종류

1. 함수형 컴포넌트
   React 버전 16부터 도입
   Hook과 함께 사용된다.
   메모리 자원이 덜 소비된다.
2. 클래스형 컴포넌트
   로직과 상태를 모두 클래스 내에 선언한다.
   UI가 복잡해진다.
   Component를 반드시 상속 받아야한다.

Template Literal?

백틱 으로 감싸는 문자열로
문자열을 템플릿화해서 ${}을 이용하여 배열이나 객체 데이터로 갈아끼울 수 있는 구조
가볍고 간결한 데이터 기반 페이지
동적 HTML 파일을 생성하는 데 도움이 된다.

IndexedDB

• 로컬 DB 지원
  웹 데이터를 브라우저에 저장한다.
  네트워크 없이 빠르게 접근이 가능하다.
• 객체 지향 : Object로 저장한다
  다양한 데이터를 저장할 수 있다.
• Transaction 지원

사용자 측 브라우저에 저장하기 위한 API

1. 쿠키 : 문서 내부에 간단한 문자열 데이터를 저장
   • 고전적 방식
   • 적은 양의 데이터만 저장 가능
   • 문자열만 저장 가능
   • 보안 이슈가 있음
   • Login 상태 유지나 HTTP 연결 상태 보완 등에 이용된다.
2. Local Storage
   • JSON 데이터를 문자열로 변환하여 저장
   • Key-value 쌍
   • 경량 데이터 교환 형식으로 단순한 데이터만을 저장한다.
   • 자동 로그인
3. Session Storage
   • JSON 데이터를 오직 탭 세션에 저장
   • 이동하거나 탭을 닫으면 사라진다.
   • 일회성 로그인
4. Indexed DB
   • key를 이용해 Index되는 구조화된 데이터를 쉽게 저장
     복잡한 데이터를 저장할 수 있음
   • key를 통한 저장과 조회가 가능해진다.
   • 훨씬 많은 데이터를 저장할 수 있다.

➡️ IndexedDB는 index를 지원하기때문에 많은 양의 구조화된 데이터를 다룰 때 적합하다.

특징

• 장점
  • 복잡 구조적 데이터를 브라우저에서 다룰 수 있음
  • 더 많은 양의 데이터를 저장 가능
  • 상호작용시 더 많은 제어 가능
  • 여러 개 데이터베이스 그리고 테이블을 가질 수 있다.
• 단점
  • 웹 저장소 API 보다 사용법이 더 복잡하다.

작업 순서

1. 데이터베이스 열기
2. 데이터베이스에 ObjectStore 생성하기
3. Transaction
4. index마다 DOM 이벤트 수신해서 작업
5. 결과 수행

데이터베이스 열기

let request = indexedDB.open(name,version)
name : db 이름
version : 기본 1