ライフサイクルはHook UseEffect UseRef Promiseをやり直します.all

構成部品ライフサイクル

反応素子にはライフサイクルがある.ライフサイクルメソッドは、構成部品の表示、更新、および消失時に呼び出されるメソッドです.また、構成部品にエラーが発生した場合に呼び出す方法もあります.
ライフサイクルメソッドはクラス構成部品のみで使用され、関数構成部品はHookを使用します.

描画
➤ render

を選択します.
➤ componentDidMount

そして私が後で変わったとき.
➤ componentDidUpdate

そして私が消えた時.
➤ componentWillUnmount
リファレンス

クラス構成部品のライフサイクル

import { Component, createRef } from "react";
import Router from "next/router";

interface IState {
  count: number;
}

export default class ClassComponentLifecyclePage extends Component {
  inputRef = createRef<HTMLInputElement>();

  state = {
    count: 0,
  };

  // 컴포넌트가 그려지고 난 이후에
  componentDidMount = () => {
    console.log("컴포넌트 마운트 완료");
    this.inputRef.current.focus();
  };

  componentDidUpdate = () => {
    console.log("컴포넌트 수정 완료");
  };

  // 컴포넌트 사라질 때  페이지 이동하면 잘가요~~ 왜 필요? 채팅 방에서 나가는 경우 알림
  componentWillUnmount = () => {
    console.log("잘가요~~");
  };

  onClickCount = () => {
    this.setState((prev: IState) => ({
      count: prev.count + 1, // prev 가 가지고있는 count
    }));
  };

  onClickMove = () => {
    Router.push("/");
  };

  render() {
    return (
      <>
        현재카운트: {this.state.count}
        <button onClick={this.onClickCount}>카운트 증가!!</button>
        <button onClick={this.onClickMove}>페이지 이동하기</button>
        <input type="text" ref={this.inputRef} />
      </>
    );
  }
}

関数型構成部品のライフサイクル

import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router";

export default function FunctionalComponentLifecycle() {
  const router = useRouter();
  const [count, setCount] = useState(0);

  // 위에를 이렇게 쓸 수도 있음
  // const [state, setState] = useState({
  //     count: 0
  // })

  const inputRef = useRef<HTMLInputElement>();

  // componentDidMount 와 동일
  useEffect(() => {
    console.log("컴포넌트 마운트 완료!!");
    inputRef.current.focus();

    // componetWillUnmount 와 동일(사라지는 작업을 할 때는 이부분에서)
    return () => {
      console.log("잘가요~~");
    };
  }, []); // [ ] 의존성배열

  // componentDidUpdate 와 동일 ( 100% 일치하지는 않음. 처음에 한번 무조건 실행(console)되는 성격때문에)
  useEffect(() => {
    console.log("컴포넌트 수정 완료!!");
  });

  // setState와 useEffect
  //   useEffect(() => {
  //     setCount((prev) => prev + 1)
  //   }, [])

  // setState와 useEffect의 dependency-array
  //   useEffect(() => {
  //     setCount((prev) => prev + 1);
  //   }, [count]);

  function onClickCount() {
    setCount((prev) => prev + 1);
  }

  function onClickMove() {
    router.push("/"); // 아무페이지나 이동
  }

  return (
    <>
      현재카운트: {count}
      <button onClick={onClickCount}>카운트 증가!!</button>
      <button onClick={onClickMove}>페이지 이동</button>
      <input type="text" ref={inputRef} />
    </>
  );
}

React hooks

- useEffect

HooksはEffectを使用してライフサイクルを管理します.
useEffectはクラスライフサイクル法においてcomponentDidMountおよびcomponentDidUpdateおよびcomponentWillUnmontの3つの役割を果たしている.useEffectは、要素の描画後に実行される関数である.コールバック関数があり、依存配列がなくてもよい.無条件レンダリング後に1回実行します.

1.依存配列が存在しない

 useEffect(() => {
    console.log("컴포넌트 수정 완료!!");
  });

値が変化すると、認識され実行されます.だから多くの不要な行為が発生します.

2.依存配列が存在する場合(Dependency)

  // componentDidMount 와 동일
  useEffect(() => {
    console.log("컴포넌트 마운트 완료!!");
    inputRef.current.focus();

    // componetWillUnmount 와 동일(사라지는 작업을 할 때는 이부분에서)
    return () => {
      console.log("잘가요~~");
    };
  }, []); // [ ] 의존성배열

依存配列が空の場合は、レンダリング後に1回のみ実行され、実行されません.

3.「依存配列」(Dependency)で特定の変数を指定

     useEffect(() => {
       setCount((prev) => prev + 1);
     }, [count]);

レンダリング後に1回実行され、依存配列内の変数の値が変化した場合にのみ実行されます.
リファレンス

- useRef

特定のラベルを操作するために選択したときに使用するツール.
JavaScriptを使用する場合、特定のDOMを選択する必要がある場合、getElementById、querySelectorなどのDOMセレクタ関数を使用してDOMを選択します.react refを使用してDOMを選択します.
useRefは、currentの属性を持つオブジェクトを返し、パラメータに変換された初期値をcurrentの属性に割り当てる.currentプロパティは、ステータスを変更したときのようにレンダリングされません.
たとえば、タグを入力するとカーソルが点滅したり、特定の領域のサイズや色を変更したり、scrola位置をインポートしたりします.

  const inputRef = useRef<HTMLInputElement>();

  useEffect(() => {
    console.log("컴포넌트 마운트 완료!!");
    inputRef.current.focus();

    return () => {
      console.log("잘가요~~");
    };
  }, []); 

// useRef로 이미지 등록 구현하기
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

return <input type="password" ref={inputRef} />;

import { useRef } from 'react';

export default function Web() {
	const inputEl = useRef();

	const readImage = (input) => {
		// 인풋 태그에 파일이 있는 경우
		if (input.target.files && input.target.files[0]) {
	// FileReader 인스턴스 생성
	const reader = new FileReader();
	// reader가 이미지 읽도록 하기
        reader.readAsDataURL(input.target.files[0]);
	// 이미지가 로드가 된 경우
	reader.onload = (e) => {
		const previewImage =document.getElementById('image');
			previewImage.src = e.target.result;
				}
		}
	};

	const handleFileBtn = () => {
		inputEl.current.click();
	};

	return (
		<>
			<div>
				<img onClick={handleFileBtn} style={{ width: '500px' }} id="image" />
				<input
					hidden={true}
					ref={inputEl}
					id="fileTag"
					type="file"
					onChange={readImage}
				></input>
				<button onClick={handleFileBtn}>이미지 등록 버튼</button>
			</div>
		</>
	);
}

読む
読む

Promise.all

同期要求を同時に送信する役割を果たす.Promise非同期で処理するときはデータをあげます.約束だけです.今はまだ近づかないPromiseを同時に受け取る方法がありますall([配列])

//시간 재는거
const start = performance.now();
//이미지를 5개를 넣는 다고 가정. 업로드를 5번 해줘야함. async await 이라 순서대로 기다려야함. 총 5번 뮤테이션 너무 오래걸림. 동시에 올리는 방법을 해야함.=> Promise.all
const result1 = await uploadFile({variables: {file: myFile}}),
const result2 = await uploadFile({variables: {file: myFile}}),
const result3 = await uploadFile({variables: {file: myFile}}),
const result4 = await uploadFile({variables: {file: myFile}}),
const result5 = await uploadFile({variables: {file: myFile}});
const end = performance.now();
    // console.log(end - start);

async function onClickSubmit() {
  const start = performance.now();
  Promise.all([
     uploadFile({ variables: { file: myFile } }), 
     uploadFile({ variables: { file: myFile } }),
     uploadFile({ variables: { file: myFile } }), 
     uploadFile({ variables: { file: myFile } }),
     uploadFile({ variables: { file: myFile } }),
    ]);
// 5개 동시에 보내고 동시에 받고. => 5개 동시에 보내고 5개 다 받을 때까지 await