Debcos 41第TIL:React[起動反応、JSX、管理素子状態およびバインドイベント、useEffect、useRef、craco]

やっと反応しました!同時に自信が下がる.なぜVueの方が簡単なのか、深く感じました.しかし最終的には明確な傾向があるようで、勉強すると可愛くなります.長い間かわいい.反応もそうだった.くれぐれもそうしなさい.
create-react-app
Webパッケージなどの設定をしなくても応答を簡単に使用できます.npx create-react-app tj-app , npm startJSX
JSXの使用に応答し、JSXを使用する場合
class=className:すでに保留中のclass保留語があるため
最上位要素は1つでなければなりません.別のDOMで包んだり回復したりします.分割を利用する.
レスポンス(JSX)の式
データの操作
データの使用{{でーたのしよう}}function App() { const name = '리액트' return ( <h1\>{ name }</h1>) }じょうけんしき
3つの演算子、&&などを使用{ showLink && (<h1\>{ name }</h1>) }:showLinkがtrueの場合のh 1マーキング動作
複文
keyを追加して最適化<ul>{ name.map((item) ⇒ ( <li key={item}> { item } </li>))}</ul>propsとdefaultProps、proptypes、children

// App.js
import './App.css';
import Logo from './components/Logo';
import Paragraph from './components/Paragraph';

<Logo size={100} /> // string 사용시 "100px", Number 사용시 { }
<Logo /> // 기본값 200 사용됨

<Paragraph>
  Edit <code>src/App.js</code> and save to reload.
</Paragraph>

// Logo/index.js
import PropTypes from 'prop-types';

function Logo(props) {
  return(
    <img src={logo} className="App-logo" alt="logo" 
    style={{ width: props.size, height: props.size }} />
  )
}
Logo.defaultProps = { // 기본값 정의
  size: 200,
}
Logo.propTypes = {
  size: PropTypes.number
}
export default Logo;

// Paragraph/index.js
import PropTypes from 'prop-types';

function Paragraph({ children, size }) {
  return <p style={{ fontSize: size}}>{children}</p>
}

Paragraph.propTypes = {
  children: PropTypes.node.isRequired
}

export default Paragraph;

function Logo({ size = 200 })のような非構造化割当が使用可能defaultProps:デフォルト値の定義、propTypes:データ型の制限{ children }:保持子要素children: PropTypes.node.isRequired:そのうちnodeはjsxなどの元素を受け入れることができるタイプであり、isRequiredは必要な元素である.
構成部品ステータスの管理とイベントのバインド
ゾーンステータス管理とイベントバインド

import { useState } from "react"

function Counter() {
  const handleIncrease = () => {
    setCount(count + 1);
  }
  return(
    <div>
      { count }
      <button onClick={handleIncrease}>+</button>
    </div>
  )
}
export default Counter

// App.js
import Counter from './components/Counter'

function App() {
  const [totalCount, setTotalCount] = useState(0);

  return (
    <div>
      <Counter />
    </div>

ここでcountはステータス、setCoonは:値を変更可能な関数、const [count, setCount] = useState(0); hook、関数内のステータスを管理できます
両親にメッセージを送る

import { useState } from "react"
import ProtoTypes from 'prop-types'

function Counter({ onIncrease, onDecrease }) {
  const [count, setCount] = useState(0)

  const handleIncrease = () => {
    setCount(count + 1)
    if (onIncrease) onIncrease(count + 1) // 검증
  }

  const handleDecrease = () => {
    setCount(count - 1)
    if (onDecrease) onDecrease(count - 1)
  }

  return(
    <div>
      { count }
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  )
}

Counter.protoTypes = {
  onDecrease: ProtoTypes.func, // 함수
  onIncrease: ProtoTypes.func 
}

export default Counter

//App.js
import { useState } from 'react'
import Counter from './components/Counter'

function App() {
  const [totalCount, setTotalCount] = useState(0)

  return (
    <div>
      totalCount: {totalCount}
      <Counter 
        onIncrease={(count) => { setTotalCount(totalCount + 1) }}
        onDecrease={(count) => { setTotalCount(totalCount - 1) }} />
        <Counter 
       onIncrease={(count) => { setTotalCount(totalCount + 1) }}
        onDecrease={(count) => { setTotalCount(totalCount - 1) }} />
    </div>
  );
}

export default App;

useEffect
変化に応えるHook

useEffect(() => {
    console.log(`Clicked ${count} times.`)
  }, [count]) 

countが変化するたびに、コンソール.ログが使用されています
countに値が挿入されていない場合は、ライフサイクルの開始時に実行されます.

useEffect(() => {
    console.log('Component Loaded')
    const handleScroll = () => {
      console.log(window.scrollY);
    };
    document.addEventListener("scroll", handleScroll)
    return () => document.removeEventListener("scroll", handleScroll) 
  }, [])

グローバルイベントの使用:useState(0);グローバルイベントを使用する場合は、コンポーネントがreturnで終了したときにイベントを削除する必要があります.
useRef
DOMに直接アクセスするか、領域変数として使用します.
値を変更するたびにレンダリングされるusStateとは異なり、値が変更されても再レンダリングされません.
直接アクセスDOM

// App.js
import { useRef } from 'react'
import Input from "./components/Input.js"

function App() {
  const inputRef = useRef();
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}
export default App;

// Input.js
import React from "react"

const Input = React.forwardRef((_, inputRef) => {
  return (
    <>
    <input ref={inputRef} />
    </>
  )
});
export default Input;

入力と入力を接続するために、document.addEventListener("scroll", handleScroll)およびinputRef=useRefを使用してDOMにアクセスします.
領域変数としてUseRefを使用

import { useRef, useState } from "react"

const AutoCounter = () => {
  const [count, setCount] = useState(0)
  const intervalId = useRef() 
  const handleStart = () => {
    intervalId.current = setInterval(()=>{
      setCount((count) => count + 1)
    }, 1000);
  }
  
  const handleStop = () => {
    clearInterval(intervalId.current)
  }

  return(
    <>
      <div>{count}</div>
      <button onClick={handleStart}>Start</button>
      <button onClick={handleStop}>Stop</button>
    </>
  )
}
export default AutoCounter;

// App.js
import AutoCounter from './components/AutoCounter.js';

function App() {
  return (
      <AutoCounter/>
  );
}

export default App;

intervarIdをuserefに挿入すると、値が変化しても再レンダリングされません.
cracoライブラリの使用
/*@jsxImportSource@emotion/react/利用可能
cracoライブラリInput ref={inputRef}npm i -D @craco/craco波一生星後取付craco.config.js

// craco.config.js
module.exports = {
  babel: {
    "presets": ["@emotion/babel-preset-css-prop"]
  }
}

packge.jsonで@emotion/babel-preset-css-propを変更"start": "react-scripts start" , "start": "craco start"styledを使用してcssを適用する

import styled from "@emotion/styled";

const Box = styled.div`
  width: 100px; 
  height: 100px;
  background-color: aqua;
`;

export default Box;

// App.js
function App() {
  return (
    <div>
      <div css= {{ width: 200, height: 100, backgroundColor: "black" }} />
      <Box />
    </div>
  );
}

"build": "craco build"のように行内形式で提供することもできます