Optional-Chaining

optional-chaingとは기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자です.optional-chaingは、ES2020の最新の構文です.
以前は삼항 연산자を使用していました.dataは、同期して受信する必要があるデータである.しかし、データが来る前にreturn部分に렌더링が提供されていたので、3つの演算子を使用する必要があり、データがあるときは、データがないときはすべて書きます.

data ? data.fetchProfile : undefined

その後&& 연산자を使用しました.

data && data.fetchProfile

&&연산자データがない場合は、undefinedが自動的に返されます.データがなければ、divと別途書く必要もありません.しかし、このコードも減らしたいようです.&&연산자は前の値が真の場合のみ後の値を表示し、逆に前の値が偽の場合は後の値を表示する場合もある.これをNullish coalescing演算子と呼びます.

data ?? data.fetchProfile

data || data.fetchProfile

optional-chainingが?演算子の前のオブジェクト参照がundefined || nullである場合、undefinedが返されます.上の3つの演算子,&&演算子と同じ機能を持ちます.でももっと簡単になりました.

非構造化割り当て(=構造分解)

비구조화할당 = 구조분해할당は同じ意味です.
構造分解配分も最新の構文です.ES 6(ES 2015)バージョンの機能です.구조분해할당は単純な배열과 객체를 해체하여 안의 값을 사용です.
例を通して理解する.

ぶんかいアレイこうぞう

let data = ["one", "two", "three"];

[일, 이, 삼] = data;
console.log(일) // "one"
console.log(이) // "two"
console.log(삼) // "three"

次のような場合もあります.

const [a, b] = [1, 2]
console.log(a) // 1
console.log(b) // 2

思えばReactで使われているuseStateと同じ形です.

const [count, setCount] = useState(0)

私たちは上のように書いています.useStateは関数であることがわかります.そして、結果が出てきます.
上記useStateは、以下の結果である.

const count = useState(0)[0]
const setCount = useState(0)[1]

USStateの起動方法について詳しく説明しました.

オブジェクト構造の分解

オブジェクトは、構造分解割り当てとしてより便利に使用することもできます.
例

let profile = {name:"철수", age:8}

上記のオブジェクトから値を取り出すにはprofileを使用します.name/profile.ageを使いました.ただし、オブジェクトの内容が長ければ長いほどprofileは貼り付けにくくなります.
従って、객체의 키로 바로 접근は、以下のように簡便に行うことができる.

const {name, age} = profile
console.log(name) // "철수"
console.log(age) // 8

または、name, age라는 이름 대신, 다른 것도 사용であってもよい.

const {name:aaa, age:bbb} = profile
console.log(aaa) // "철수"
console.log(bbb) // 8

上記の例では、Query로 데이터를 받아 올 때を使用しています.

const {data} = useQuery(어쩌구저쩌구)

この場合、構造分解分配が行われない場合、data.data.fetchBoardの方法で取得されるべきである.dataを2回も使ったなんて...どうやら構造分解で配分されるらしい!!
ただし、1箇所がuseQuery를 2번이나 써야 하는 경우도 있다.であれば、データで2回作成することはできません.

const {data} = useQuery(아무말대잔치)
const {data:BestData} = useQuery(아무말대잔치)

上記のように、1つは最適なデータです.fetchはでたらめの大宴会として持ち帰ることができる.

実際の操作に使用するフォルダ構造(container/presenter)

プロジェクトを作成する際には、フォルダ構造が重要です.
実務で使用するフォルダ構造には、さまざまな方法があります.
これらの方法は패턴と呼ばれています.Reactで使用されている有名な図案.
1.container / presentationalパターン
2.atomicパターンがあります.

コンテナ/予選モード

container / presentational 패턴は、ソースコードを자바스크립트(기능)とHTML(UI)にどのように分けるかを意味する.
ここでcontainerはJavaScript(機能)部分を表し,HTML(UI)部分を表す.

上のファイルを2つに分ける方法はこうです.

げんしモード

atomicモードは、まずソースコードを小さな要素に分割することを意味する.
その理由は컴포넌트의 중복을 최소화하기 위함です.
全部で5つのフォルダ構造があり、それぞれが化学の原理を利用して製造されています.

原子、分子、生体、テンプレート、ページを5つのフォルダに分けて構成部品を管理します.
原子図案はデザイナーたちがよく知っている図案です.そのため、Atomoicモードを使用すると、設計者との連携が容易になり、プロジェクトからシステムのUI設計が可能になります.
しかし,プロジェクトから設計者と共にUIを設計するため,開発準備に時間がかかる可能性がある.従って、一般的には時間、費用、状況に応じて適用される.

props

propsは、부모 컴포넌트가 자식컴포넌트에게 넘겨준 데이터, 기능 등を意味する.

素子を二つの部分に分けることで、データと機能の絆が切れた.このとき、親エレメントと子エレメントをpropsに接続することができる.

props構造分解として受信を割り当てる

簡単に(props)迎えに来たら後はprops~~に示すように支柱を貼り付けなければなりません.したがって,上述した構造分解割当てを適用すると便利である.
既存のコードは次のとおりです.

export const function BoardWrite(props){

<input onChange={props.handleInput}
<button onClick={props.handleChange}
}

構造分解は次のように割り当てられます.

export const function BoardWrite({handleInput, handleChange}){

<input onChange={handleInput}
<button onClick={handleChange}
}

このように中括弧で構造分解配分を行うことで,propsを用いずに簡単に使用できるようになった.

感情に投げつける道具

感情で作ったラベルでも道具を伝えることができます.
すなわち,特定のラベルをクリックするなどの動作が発生した場合,propsをアクティブにすることでcssを変更することができる.
単純な例

import { useState } from 'react';
import { Test } from '../../src/test2';

export default function Test2() {
	const [isTrue, setIsTrue] = useState(false);

	const handleOnClick = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Test onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);
}

import styled from '@emotion/styled';

export const Test = styled.div`
	color: red;
`;

上記のコードは、divをクリックするたびにhandleOnClick関数を実行してisTrueの値を変更します.

return (
		<>
			<Test isTrue={isTrue} onClick={handleOnClick}>클릭하면 색이 왔다 갔다</Test>
		</>
	);

ひっくり返す方法は簡単です.propsに渡した時と同じです.

export const Test = styled.div`
	color: ${(props) => (props.isTrue ? 'red' : 'blue')};
`;

前述したように、isTrue値は感情から得ることができる.3つの演算子で、trueの場合はred、flaseの場合はblueに設定します.
onClickだけでなく、onMouseOver/onMouseLeaveなどのタグにはonで始まる属性がたくさんあるので、いろいろな面で使用できます.また、true/falseとstring、numberタイプを渡すこともできます.
要するに、特定の状況では、CSSの変更は感情を通じてpropsを伝えることができます!!