00

컴포넌트 특징
1. 컴포넌트는 독립적이고, 재사용이 가능한 작은 UI조각이다.
2. render()를 통해 HTML 요소를 반환하는 함수이다.
3. 자바스크립트 함수와 동일한 용도로 사용된다.
4. 코드를 효율적으로 관리할 수 있게 도와준다.

IndexedDb 설명
1. 브라우저에 객체를 저장할 수 있다.
2. 트랜잭션을 지원한다.
3. 자바스크립트 기반의 객체 지향 데이터베이스입니다.
4. 자바스크립트의 객체, 파일, blobs등을 저장할 수 있다.

01 컴포넌트

컴포넌트

render()를 통해 HTML 요소를 반환하는 함수
독립적이고, 재사용이 가능한 작은 UI 조각
Javascript함수와 동일한 용도로 사용

복합한 웹을 작은 컴포넌트로 쪼개면 재사용이 쉽고 효율적으로 관리할 수 있다.

다른 js파일에 있는 함수를 불러와서 사용할 수 있다.

App.js

//App.js
const name = "Elice";
//컴포넌트선언
function Hello() {
  return <h1> Hello,{name} </h1>; 
}

export default Hello;

index.js

//index.js
import Hello from './App';

ReactDOM.render(<Hello/>,
document.getElementById('root'));

return() 내에 있는건 태그 하나로 묶기

//App.js
import Hello from './component/Hello.js';
import Post from './component/Post.js';
const name = "Elice";
//컴포넌트선언
function App() {
  return (
    <div className= "App">
    <Hello/>
    <Post/>
    </div>
  );
}

export default App;

함수형 컴포넌트 vs 클래스형 컴포넌트

1) 함수형 컴포넌트 (트랜드)

const name = "Elice"
const Hello = () => {
  return <h1> Hello, {name}</h1>;
}
//컴포넌트호출
const element =<Hello/>
  ReactDOM.render(element, 
  document.getElementById('root'));

덜 복잡한 UI 로직
Component 선언이 편함
클래스형보다 메모리 자원 덜 사용

2) 클래스형 컴포넌트

import Component from 'react'
constname = "Elice"

class Hello extends Component {
  render() {
    return<h1> Hello, {name} </h1>
  }
}
const element = <Hello/>
      ReactDOM.render(element, 
      document.getElementById('root'));

Class 키워드 필요
Component를 상속 받아야 함
Render() 메소드 반드시 필요
함수형보다 메모리 자원 더 사용

최근에는 함수형 컴포넌트가 실무에서 쓰인다고 한다.

컴포넌트 반환

//App.js
import Nav from './component/nav/Nav.js'
importPosts from './component/post/Posts.js'
const App = () => {
  return `
	${Nav()}
	<div class="container">
	${Posts()}
	</div>
`
}

01 기능구현

IndexedDb

관계형 db가 아니다
SQL사용 안함
브라우저의 객체를 저장할 수 있다
자바스크립트 객체, 파일, blobs등을 저장한다.
Transaction을 지원

자바스크립트 기반의 객체지향 데이터베이스 -> 자료형과 객체 저장 가능
클라이언트(사용자) 측 브라우저에 저장하기 위한 API

Key-Value 형태의 데이터 저장
index 지원 -> 많은 양의 구조화된 데이터를 다룰때 적합
localstorage에 비해 훨씬 많은 데이터 저장 가능

작업 순서

1. 데이터베이스 열기
2. 데이터베이스에 ObjectStore 생성
3. Transaction 시작 - 데이터 추가, 검색 작업 요청
4. index 마다 DOM 이벤트 수신해서 작업
5. 결과 수행

1. 데이터베이스 열기

let request = indexedDB.open(name, version);

let request = indexedDB.open('mydb', 1);

name: 문자열, 데이터베이스 이름
version: 기본적으로 양의 정수 버전, 1
db수정시 version을 수정해야함

let onRequest = indexedDB.open('mydb', 1);
	onRequest.onsuccess = () => {
    	console.log('Success creating or accessing db')
    }
    onRequest.onupgradeneeded = () => {
    	const database = onRequest.result
    }
    onRequest.onerror = () => {
     	console.log('Error creating or accessing db') 
    }

로컬 데이터베이스 버전이 지정된 버전보다 낮으면 onupgradeneeded가 트리거되고 데이터베이스 버전을 업그레이드한다.
이벤트는 데이터베이스가 아직 존재하지 않을때도 트리거되므로 초기화를 수행 가능

2. ObjectStore 생성

obejectStore
데이터를 담은 공간, 여러개의 Key-value 값으로 형성
objeectStore의 이름은 고유해야함

database.createObjectStore('스토어이름', {keyPath:'id'});
database.createObjectStore('스토어이름', {autoIncrement: true})
database.createObjectStore('스토어이름', {keyPath: 'id', autoIncrement: true})

onRequest.onupgradeneeded = () => {
	const database = onRequest.result
    const objectStore = database.createObjectStore('users', {keyPath: 'id'})
}

.onupgradeneeded() 로 데이터베이스가 업그레이드될때 ObjeectStore생성또는 수정 가능
createObjectStore(tableName)을 이용해서 objectStore라는 이름으로 ObjectStore 를 생성하고,
users라는 테이블을 만든다.
=> objectStore 저장소에 users 테이블 생성
keyPath는 id를 제공하는데 필요한 인덱스 필드의 이름을 지정하는것이다.

const initializeDb = indexedDB.open('mydb', 1)
initializeDb.onupgradeneeded = () => {
	const database = initializeDb.result
    database.createObjectStore('users', {keyPath: 'id})
}

3. Transaction 시작 - 데이터 추가, 읽기, 수정, 제거

const transaction = database.transaction('ObjectStore이름', 'Transaction Mode')

모든 데이터 읽기 및 쓰기는 Transaction 내에서 수행됨
ObjectStore Name: 객체 저장소 이름
Transaction Mode: readonly, readwrite, versionchange

Transaction 시작하기

//users 테이블에서 transaction을 instance화
const transaction = database.transaction('users', 'readwrite').objectSotre('users')

트랜잭션은 데이터베이스 객체 단위로 작동하므로 트랜잭션을 사용할 객체 저장소를 지정해줘야 함
readwrite모드 사용: 이미 존재하는 objectStore의 데이터를 읽고 변경할때

ObjectStore에 데이터 추가하기

const todos = database.createObjeectStore('todos', {autoIncrement:true})
function addTodos() {
  			const todo = {
            		title: "todo1",
              		text: "no.1 thing to do"
            		}
        // todos ObjectStore에 readwrite권한으로 transaction 시작하기
            const transaction = database.transaction('todos', 'readwrite')
        // objectStore()함수로 todos 테이블 선택
            const todos = transaction.objectStore('todos')
        // 원하는 객체(todo)를 테이블에 추가
            todos.add(todo)
}

사용자 데이터 읽기

1) objectStore.get(key);

const transaction = databse.transaction(['users'], 'readwrite')
const store= transaction.objectStore('users')
return store.get('Frank')
// {id: 3, name: 'Frank', age: 23}

2) objeectStore.getAll();

return store.getAll()
// { id: 1, name: “Pete”, age: 35 }, {id: 2, name: “Mark”, age: 23 }, { id: 3, name: “Frank”, age: 23}

사용자 데이터 수정

return store.put('Frank')

사용자 데이터 삭제

store.delete('Frank')
return transaction.complete;