React | Review

🌱 Intro to REACT 🌱
🌱 どうしてReactを書くの?
Webの発展に伴い、Webには多くのデータが含まれており、華やかなUIを効率的に実施するために、
🌱 クラシックなFramework(Library)
Angular/Vue/React
🌱 Reactを学ぶ理由!
ユーザーが多く、生態系が活発で、Facebookの管理が継続しているため、各種データがよく記録されているため、学習の観点から簡単に入門できます.
🌱 Virtual DOM
DOM:JavaScriptでHTMLをオブジェクト化してアクセスするモデル
実際のDOMをコピーし、UIの変更部分だけを置き換えます.
🌱 Node.js & npm
Node.jsとはjavascriptをサーバなどのブラウザ以外でも実行できる環境を指す.応答はWeb上で実行されますが、NodeはバーベルやWebパッケージなどのプロジェクトに必要な主要なツールです.jsベースなので、インストールする必要があります.
npmはNodeです.インストールjsは自動インストールを実現し、npmで各種パッケージと管理バージョンをインストールすることができます.
🍒 What is CRA ? 🍒
🍒 CRA (Create-React-App)
反応プロジェクトの開始に必要な開発環境を設定するためのツール
CRAは、Webアプリケーションを作成するためのフィードバック環境を提供します.
CRAを利用して1つのコマンド言語で反応器開発環境を構築できる
CRAの初期フォルダは、[node.modules-package.json-.gitignore]と[index.html-index.js-App.js]で構成されています.
🍒 node.modules
CRAを構成するソースコードを含むパッケージフォルダ
🍒 package.json
CRAマスターパッケージ以外にインストールされているリポジトリ/パッケージ情報を記録するファイル.
依存項目では、レスポンスを使用するすべてのパッケージのリストとバージョンを表示できます.
❗️ node.modules & package.なぜjsonで二重管理を行うのですか?
コラボレーション時にインストールしたパッケージはローカルにのみ保存され、githubにアップロードしたときに作成したコードとパッケージです.json(+追加インストールの情報)をアップロードします.他の人がそれを引っ張ってnpm installするとパッケージjsonに記録されている私の追加パッケージが自動的にインストールされます.
🍒 .gitignore
githubにアップロードしたくないフォルダやファイルを作成できます.
node.modulesのように、重いのでgithubにはアップロードされません.
⭐️ Component and JSX ⭐️
｣Componentの定義と特徴
定義:リサイクル可能なUIパーティション
特徴:リサイクル可能で、コードメンテナンスに有利です.そして、このページがどのように組織されているかを一目で知ることができます.
⭐️ Class vs. Functional Component
クラスコンポーネントではrender関数が必要です!存在する必要があり、表示する必要があるjsxを返します.
関数型素子は簡単で、書くのが便利になりました.本来はstateとlifecycleメソッドはありませんが、hooksの導入によりstateとlifecycleメソッドが利用可能になります.
⭐️ JSX
Javascript Syntax拡張JavaScript拡張構文
JSXで作成したコードブラウザでの操作中にバーベルを使用してJavaScript形式のコードに変換
利点:htmlタグを直接使用すると表示と熟知が容易で、htmlタグとjavascriptを同時に使用することができます.
｣JSX特性
Javascriptシェイプを使用する場合はカッコ{ }を使用します
classの代わりにclassNameを使用
インラインスタイルの場合、javascriptコード+スタイルであるため、curlyカッコを2回使用します.

<div style={{color : "red"}}>Hello React</div>

すべての要素はトップレベルの要素に囲まれています.<> ... </>🍎 React Router & SASS🍎
🍎 SPA
シングル・ページ・アプリケーションとは、シングル・ページ・アプリケーションのことです.
反応項目でhtmlファイルが1つしかありません!Single Page Applicationです.
🍎 Routing
1つのページに複数のページを表示する方法がルーティングです.反応器自体にはこれらの機能が内蔵されていないため、React Routerなどのサードパーティ製ライブラリを追加でインストールする必要があります.(応答がframeworkではなくlibraryに分類されるのは、これらの機能が内蔵されていないためです!)
🍎 <Link> vs withRouterHOC<Link>は、クリック時に直接移動する論理を実現するために使用される.
withRouterHOCは、ページ切り替え時に追加処理が必要なロジック(バックエンドAPIへのデータ転送、ユーザデータ検証/承認など)に使用されます.
🍎 SASS
Syntactically Awesome StyleSheet
CSS Preprocessor;CSS拡張版は、実行前に使用した機能がCSSの不便を相殺します.
まずSASSで記述し,その後Web上で操作可能な規格のCSSにコンパイルする.
🌈 State & Event🌈
🌈 Stateバー
構成部品の内部構成部品のステータス値.
画面に表示する構成部品UI情報を含むオブジェクト
stateは構成部品で定義および使用され、データ(オブジェクト)は随時変更されます.
🌈 ステータスにステータス値を設定する理由
構成部品内の要素にステータス値を反映し、データを変更するたびに画面に効率的に表示できます.
🌈 stateを更新するとき?
setState()を使用してstateを更新します.更新するたびにrender関数が呼び出されます
🌸 Props & Event🌸
🌸 Propsは
構成部品の属性値
親コンポーネントから渡されたデータを持つオブジェクト.
Propsでは、ステータスのステータス値とイベントハンドラを親コンポーネントから子コンポーネントに渡すことができます.
🌸 Propsはゲスト!this:構成部品this.props:構成部品のpropsオブジェクトthis.props.titleColor:propsオブジェクトの特定のキー(タイトル色)の値.すなわち「red」
🍷 Mock Data🍷
🍷 Mock Dataの定義と必要な理由
実際のAPIからのデータではなく、フロントエンド開発者が必要に応じて作成したサンプルデータ
プロジェクトが進行すると、APIが出現する前に、フロントエンドのページレイアウトが先に現れることが多いため、mock dataを作成して、事前にデータの準備と実現を確保する必要がある.
https://ko.reactjs.org/docs/thinking-in-react.html
🍉 データを呼び出すfetch関数🍉
YERIのブログ参考:https://yeri-kim.github.io/posts/fetch/
🍉 fetch関数とは?
apiを呼び出し、データに応答するときに書き込む関数(axiosライブラリも使用可能!)

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

🍉 メソッドがgetの場合
fetch()関数では、デフォルトの方法はgetです!
Getクエリー用

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

🍉 方法はpostです.
postの場合、メソッド情報をfetch関数に渡す必要があります.
Postは生成に使用されます.
ボディは対象形状、JSONです.stringfy()を使用してJSONファイルを置き換えます.
res.json()は、バックエンドから受信したjson()フォーマットをJavaScriptオブジェクトに変換します.

fetch('https://api.google.com/user', {
    method: 'post',
    body: JSON.stringify({ //json형태로 변환
        name: "myname",
        batch: 1
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })