[React Hooks] useState, useEffect

💡 このプロジェクトは、Youtubeコード四捨五入のTodo Applicationコースで録画したクローンプロジェクトです.
1. create-react-app
cmdコマンドプロンプトウィンドウでcreate-react-appコマンドにより反応項目を生成します.

cd:移動位置

mkdir:ディレクトリの作成

npx create-react-app 프로젝트명:リアクションアプリケーションの作成

npm start:ブラウザでレスポンスアプリケーションを実行

2. App.jsの変更
プロジェクトディレクトリのsrcフォルダにアプリケーションを適用します.jsというフォルダのソースコードを変更し、結果を表示します.
App.js

// App.js ---------------------------------------------------------//

import './App.css';
// components
import List from './components/List.jsx';

function App() {
  return(
    <>
      <h1>Todo Application</h1>

      <form action="">
        <input type="text" name="" />
        <button>ADD</button>
      </form>
    </>
  );
}

export default App;

3. List Component
srcフォルダに構成部品を含めるコンポーネントフォルダを作成し、リストをクリックします.jsxファイルを生成します.
このファイルではList componentのソースコードを記述します.

// List.jsx -------------------------------------------------------//

import React from 'react';

function List() {
  return(
    <ul>
      <li>Java 공부하기</li>
      <li>React 공부하기</li>
      <li>운동하기</li>
    </ul>
  );
}

export default List;

4. React Hooks
React Hook公式ドキュメント
useState Hook
useState Hook公式ドキュメント
Reactは、ステータス管理時にUserStateという名前のHookを使用します.
useState Hookの読み込み
import React, { useState } from 'react';
useState宣言
const[状態変数名,setState関数]=userState(初期値);
[1]保留中のリストを表示する
App.js['Java 공부하기', 'React 공부하기', '운동하기']配列をtodosの初期値として指定します.
このtodoに含まれる状態をListコンポーネントに渡し、その配列に含まれるtodoリストを1つずつ表示します.

// App.js ---------------------------------------------------------//

import React, { Component, useState } from 'react';
import './App.css';
// components
import List from './components/List.jsx';

function App() {

  // ----- useState ----- //
  const [todos, setTodos] = useState(['Java 공부하기', 'React 공부하기', '운동하기']);

  return(
    <>
      <h1>Todo Application</h1>

      <form action="">
        <input type="text" name="" />
        <button>ADD</button>
      </form>

      <List todos={todos} />
    </>
  );
}

export default App;

List.jsx
リストコンポーネントにはAppが含まれています.jsから転送されたtodos配列では、todoリストが1つずつポップアップされ、<li>{todo}</li>としてレンダリングされます.

// List.jsx -------------------------------------------------------//

import React from 'react';

function List({todos}) {

  const todoList = todos.map(todo => <li key={i}>{todo}</li>);
  
  return(
    <ul>
      {todoList}
    </ul>
  );
}

export default List;

[2]新しい保留事項の登録
e.preventDefault();
HTMLでは、aタグまたはsubmitタグに固有の動作があります.
移動ページや転送フォームのinputなどの動作があり、e.preventDefault()はこれらの動作を中断することができます.
1)hrefリンクを移動したくない場合は、タグをクリックします.
2)フォームでsubmitロールとしてのボタンをクリックして新しい操作を実行したくない場合(submitが起動しました)
App.js

// App.js ---------------------------------------------------------//
import React, { Component, useState } from 'react';
import './App.css';

// components
import List from './components/List.jsx';

function App() {

  // useState
  // 등록한 todo들을 담은 배열
  const [todos, setTodos] = useState(['Java 공부하기', 'React 공부하기', '운동하기']);
  // 새로운 todo
  const [newTodo, setNewTodo] = useState();
  

  // changeInputData : newTodo에 input에 입력한 내용을 저장하는 함수
  const changeInputData = (e) => {
    setNewTodo(e.target.value);
  }
  // addTodo
  const addTodo = (e) => {
    e.preventDefault(); // 기본값 form 전송 방지
    setTodos([...todos, newTodo]);
  }

  return(
    <>
      <h1>Todo Application</h1>

      <form action="">
        <input type="text" name="" onChange={changeInputData}/>
        <button onClick={addTodo}>ADD</button>
      </form>

      <List todos={todos} />
    </>
  );
}

export default App;

useEffect Hook
useEffect Hook公式ドキュメント
React Lifecycleでは、完了フェーズ(レンダリング後に処理されるタスク)の論理を記述する場合にuserEffectというhookを使用します.
useEffect Hookの読み込み
import React, { useEffect } from 'react';
userEffect 1の使用
カッコ内で作成されたコールバック関数では、レンダリング後に処理するアクションの論理が作成されます.
useEffect( function );

function:レンダリング後に実行されるアクション(コールバック関数)

App.js

// App.js ---------------------------------------------------------//
import React, { Component, useEffect, useState } from 'react';
import './App.css';

// components
import List from './components/List.jsx';

function App() {

  // ---- useState ---- //
  // 등록한 todo들을 담은 배열
  const [todos, setTodos] = useState(['Java 공부하기', 'React 공부하기', '운동하기']);
  // 새로운 todo
  const [newTodo, setNewTodo] = useState();


  // changeInputData : newTodo에 input에 입력한 내용을 저장하는 함수
  const changeInputData = (e) => {
    setNewTodo(e.target.value);
  }
  // addTodo
  const addTodo = (e) => {
    e.preventDefault(); // 기본값 form 전송방지
    setTodos([...todos, newTodo]);
  }

  // ---- useEffect ---- //
  useEffect(() => {
    console.log('새롭게 렌더링 되었습니다.');
  });

  return(
    <>
      <h1>Todo Application</h1>

      <form action="">
        <input type="text" name="" onChange={changeInputData}/>
        <button onClick={addTodo}>ADD</button>
      </form>

      <List todos={todos} />
    </>
  );
}

export default App;

チェックの結果、入力ラベルに新しい内容が入力されたときにADDボタンを押すと、userEffectのコールバック関数が実行されることがわかります.
新しいtodoが追加された場合、つまりADDボタンをクリックしてコールバック関数が実行される場合、どうすればいいですか?
useEffect 2の使用
特定のpropsまたはstateの変更時にのみuseEffectを実行する場合は、コールバック関数の後に2番目のパラメータが渡されます.
この因子は効果に属する値の配列である.
次はtodosレイアウトが変更された場合にのみuseEffectを実行するコードです.
useEffect( function, deps );

function:レンダリング後に実行されるアクション(コールバック関数)

deps:配列形式、配列内でチェックする特定の値または空の配列

App.js

// App.js ---------------------------------------------------------//
import React, { Component, useEffect, useState } from 'react';
import './App.css';

// components
import List from './components/List.jsx';

function App() {

  // ---- useState ---- //
  // 등록한 todo들을 담은 배열
  const [todos, setTodos] = useState(['Java 공부하기', 'React 공부하기', '운동하기']);
  // 새로운 todo
  const [newTodo, setNewTodo] = useState();


  // changeInputData : newTodo에 input에 입력한 내용을 저장하는 함수
  const changeInputData = (e) => {
    setNewTodo(e.target.value);
  }
  // addTodo
  const addTodo = (e) => {
    e.preventDefault(); // 기본값 form 전송방지
    setTodos([...todos, newTodo]);
  }

  // ---- useEffect ---- //
  useEffect(() => {
    console.log('새로운 todo가 추가되었습니다.');
  }, [todos]);

  return(
    <>
      <h1>Todo Application</h1>

      <form action="">
        <input type="text" name="" onChange={changeInputData}/>
        <button onClick={addTodo}>ADD</button>
      </form>

      <List todos={todos} />
    </>
  );
}

export default App;