React週末#6

#6ベッドで転がる

userefを使用して特定のDOMを選択

JavaScriptでは、特定のDOMを選択する必要がある場合は、getElementByIdやquerySelectorなどのDOMセレクタ関数を使用する必要があります.
反応中に式DOMを直接選択する必要がある場合がある.
このとき、反応にrefを用いる.
関数型素子でrefを使用する場合はuserefというhook関数を使用します.
クラス構成部品では、コールバック関数またはreactを使用します.createRefという名前の関数を使用することは、現在は重要ではありません.
userefを使用して、以前に作成したInputSample初期化ボタンをクリックすると、名前入力に焦点を当てることができます.

InputSample.js

import React, { useState, useRef } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

useref()を使用してRefオブジェクトを作成し、選択したいDOMのref値に設定する必要があります.
このとき、Refオブジェクトの.Current値は、必要なDOMを示します.
上記のコードでは、onReset関数がフォーカス入力のfocus()APIを呼び出します.

nameInput.current.focus();

結果は...

[初期化](Initialization)をクリックすると、名前inputラベルにフォーカスが入ります.
まだあります.

const refContainer = useRef(initialValue);

userefは.現在のプロファイルに渡されたパラメータ(InitialValue)によって初期化された変更可能なrefオブジェクトを返します.

レンダーアレイ(Render Array)

今回は、オブジェクトではなくリアクターでアレイをレンダリングする方法について説明します.

const users = [
  {
    id: 1,
    username: 'velopert',
    email: '[email protected]'
  },
  {
    id: 2,
    username: 'tester',
    email: '[email protected]'
  },
  {
    id: 3,
    username: 'liz',
    email: '[email protected]'
  }
];

こんな配列があると仮定!
このスキームを構成部品としてレンダリングするにはどうすればいいですか?
コードに従って作成すればいいので、以下に示すように、srcフォルダにUserListというファイルを作成して構成部品を作成します.

UserList.js

import React from 'react';

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: '[email protected]'
    },
    {
      id: 2,
      username: 'tester',
      email: '[email protected]'
    },
    {
      id: 3,
      username: 'liz',
      email: '[email protected]'
    }
  ];
  return (
    <div>
      <div>
        <b>{users[0].username}</b> <span>({users[0].email})</span>
      </div>
      <div>
        <b>{users[1].username}</b> <span>({users[1].email})</span>
      </div>
      <div>
        <b>{users[2].username}</b> <span>({users[1].email})</span>
      </div>
    </div>
  );
}

export default UserList;

上のようにコードを書いてみましたが、繰り返し使用するコードをすべて入れるのは効率的ではないので、コンポーネントを繰り返し使用できるコードを再作成します.
UserListファイルを再修正すると...
ああ!また、1つの構成部品ではなく複数の構成部品を1つのファイルに宣言しても問題ありません.

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: '[email protected]'
    },
    {
      id: 2,
      username: 'tester',
      email: '[email protected]'
    },
    {
      id: 3,
      username: 'liz',
      email: '[email protected]'
    }
  ];

  return (
    <div>
      <User user={users[0]} />
      <User user={users[1]} />
      <User user={users[2]} />
    </div>
  );
}

export default UserList;

これで、Appファイルで構成部品をレンダリングします.

App.js

import React from 'react';
import UserList from './UserList';

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

export default App;

結果は...

100以上の配列がある場合は、1つずつクエリーし、1つずつレンダリングするのは効率的ではなく、JavaScript配列の内蔵関数map()を使用することができます.
map()関数は、配列内の各要素を新しい配列に変換します.
ダイナミックアレイをレンダリングする場合、リアクターはmap関数を使用して通常のデータアレイをリアクターからなるアレイに変換します.
UserListコンポーネントを変更するには、次の手順に従います.

UserList.js

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: '[email protected]'
    },
    {
      id: 2,
      username: 'tester',
      email: '[email protected]'
    },
    {
      id: 3,
      username: 'liz',
      email: '[email protected]'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} />
      ))}
    </div>
  );
}

export default UserList;

このように記述すると、すべての要素はmap関数を1回書き込むだけで、各配列の要素を繰り返し書き込むのではありません.
しかし、ブラウザのコンソールに行くと、特定のエラーが表示されます.

リアクターでアレイをレンダリングする場合はkeyというpropsを設定する必要があります.
key値は、要素ごとに一意の値を設定する必要があります.上記の場合、idは一意の値です.
keypropを追加すると...

UserList.js

return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );

配列に一意の値がない場合、map関数を使用する場合に設定されるコールバック関数の2番目のパラメータindexがkeyに設定されます.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

ここで整理すると….
map関数が鍵を必要とする理由は

Mapにキー値がない場合、中間の値が変化すると、そのすべてのサブ値が変化するからです.キー値を使用する場合は、キーを使用して中間値を追加します.

注:ベロフォードとのモダン反応
感じ:

今日、userefとタイルをレンダリングする方法について説明しました.

map関数は並べ替えを再開するため,反応でよく用いられ,userefには混同する点がある可能性があるため,再学習が必要である.