00

構成部品フィーチャー
1.コンポーネントは、独立した再利用可能な小さなUIブロックである.
2.render()でHTML要素の関数を返します.
3.JavaScript関数と同じ用途に使用します.
4.コードの効率的な管理を支援します.
IndexedDBの説明
1.ブラウザにオブジェクトを保存できます.
2.取引をサポートします.
3.JavaScriptベースのオブジェクト向けデータベース.
4.JavaScriptのオブジェクト、ファイル、blobsなどを保存できます.

01構成部品

構成部品

HTML要素をrender()で返す関数
独立した再利用可能な小さなUIブロック
Javascript関数と同じ用途
複雑なWebを小さなコンポーネントに分割することで、再利用を簡単かつ効率的に管理できます.

他の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;

関数構成部品とクラス構成部品

1)関数要素(傾向)

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

あまり複雑でないUIロジック
コンポーネントを簡単に宣言
メモリリソース使用率がクラスより低い
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'));

カテゴリキーが必要
コンポーネントを継承する必要があります
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の無効化
ブラウザ内のオブジェクトを保存できます
JavaScriptオブジェクト、ファイル、blobsなどを保存します.
取引のサポート
JavaScriptベースのオブジェクト向けデータベース->格納可能なデータ型とオブジェクト
クライアント(ユーザ)側ブラウザに格納するためのAPI
キー値でデータを格納
indexサポート->大量の構造化データの処理に適しています
localstorageよりも多くのデータを格納できます

操作順序

データベース

を開く

データベースにオブジェクトリポジトリ

を作成する.

トランザクションの開始-データの追加、

の取得を要求
各

indexはDOMイベントを受信し、

を処理する.

実行結果

1.データベースを開く

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

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

name:文字列、データベース名
version:デフォルトでは正の整数バージョン、1
dbの変更時にバージョンを変更する必要があります

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') 
    }

ローカル・データベース・バージョンが指定したバージョンより低い場合、onupgradeedがトリガーされ、データベース・バージョンがアップグレードされます.
イベントはデータベースが存在しない場合にもトリガーされるため、初期化を実行できます.

2.オブジェクト記憶領域の作成

obejectStore
複数のキー値からなるデータを含むスペース
objectStoreの名前は一意でなければなりません

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'})
}

データベースが.onupgradeed()にアップグレードされると、ObjecteectStoreを作成または変更できます.
createObjectStore(テーブル名)を使用して、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で完了
ObjectStoreName:オブジェクトリポジトリ名
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;