既存の配列を追加/削除/変更し、配置に影響しません.

22909 ワード
Spread React テキストリンク
1▼ユーザーアレイにプレイヤーを追加
🚫 配列に値を追加する場合は、既存の配列にpush値を追加できません.
💯 既存のシナリオに影響を与えないように、新しいシナリオを作成し、シナリオを変更する必要があります.
//CreateUser.js

import React from 'react';

// 필요한 컴포넌트를 props 로 받아올 예정
// onchange : input 값이 바뀌게 될 때 호출하는 함수
// onCreate : 버튼을 눌렀을 때 항목을 추가해주는 함수
function CreateUser({ username,email,onChange,onCreate}) {
    return (
        <div>
            <input 
                name="username" 
                placeholder="계정명" 
                onChange={onChange} 
                value={username}
            />
            <input 
                name="email" 
                placeholder="이메일" 
                onChange={onChange} 
                value={email}
            />
            <button onClick={onCreate}>등록</button>
        </div>
    );
}

export default CreateUser;
//App.js
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  // inputs라는 변수에 대해서
  // 초기값 {username:'', email:''},
  // 변경 함수는 setInputs
  const [inputs, setInputs] = useState({
    username:'',
    email:'',
  });
	
  // inputs의 변수를 미리 빼오기
  const {username, email} = inputs;
  // 기존 객체에 영향이 없도록 Spread를 이용
  const onChange = e => {
    const {name,value} = e.target;
    setInputs({
      ...inputs,
      [name] : value
    });
  };

  return (
    <>
      <CreateUser 
        username={username} 
        email={email} 
        onChange={onChange} 
        onCreate={onCreate}/>
      <UserList users={users}/>
    </>
  );
}
//App.js

const [users, setUsers]=  useState([
    {
        id: 1,
        username: 'doyeon',
        email: '[email protected]'
    },
    {
        id: 2,
        username: 'woong',
        email: '[email protected]'
    },
    {
        id: 3,
        username: 'woody',
        email: '[email protected]'
    }
  ]);

const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email,
      // username, email 대신 ...users 가능
    };
    // 새로운 객체 user를 만들어서 값 할당 
    // 기존의 배열 user는 건들이지 않고, user가 추가됨
    
    // 기존 배열 users에 새로 만든 객체 user을 붙여줌
    setUsers(users.concat(user));

    setInputs({
      username:'',
      email:''
    });
    console.log(nextId.current); //4
    nextId.current += 1;
  }
既存オブジェクトusersに新規オブジェクトuserを追加する場合

  • 展開の使用setUsers([...users, user]);

  • concatの使用setUsers(users.concat(user));
    • 2▼ユーザー配列からユーザーを削除
    ボタンを押すと、プレイヤーを削除させたい.
    この場合、削除関数を指定するときは矢印関数として指定する必要があります.
  • 🚫 deleteFunc()を直接指定すると、レンダリングと同時に要素が削除されます.
    • 💯 関数を呼び出すのではなく、関数を追加する必要があります.
    //UserList.js

import React from 'react';
import './App.css';

function User({user, onRemove}){
    const {username, email, id } = user;
    return(
        <div>
            <b>{username}</b> 
            <span>({email})</span>
     // 🔥 반드시 화살표 함수로 함수 넣어주기!!!!
            <button onClick={() => onRemove(id)}>삭제</button>
        </div>
    );
}

function UserList({users, onRemove}){
    return (
        <div>
            {
                users.map(
                    (user,index) => (
                    <User 
                        user={user} 
                        key={user.id} 
                        onRemove={onRemove}
                    />
                    )
                )
            }
        </div>
    )
}

export default UserList;
    //App.js

  const onRemove = id => {
    // user.id가 파라미터로 받은 id가 아닌 경우에만 
    // 새 리스트로 묶어서 반환해준다.
    // 반환된 리스트를 setUsers로 업데이트 해준다.
    setUsers(users.filter(user => user.id !== id))
  }

  return (
    <>
      <CreateUser 
        username={username} 
        email={email} 
        onChange={onChange} 
        onCreate={onCreate}/>
      <UserList users={users} onRemove={onRemove}/>
    </>
  );
}
    3▼ユーザー配列からユーザーを削除
    map関数を使用すると、配列内の要素を簡単に変更できます.
     const onToggle = id => {
    setUsers(users.map(
      user => user.id === id?
      { ...user, active: !user.active}
      : user
    ))
  }
    パラメータとしてidを受信するuserを見つけます.
    Active変数の状態を切り替えます.
    この場合、上記の場合と同様に、既存のuser要素...userを直接インポートできます.
    変更した値のみを上書きするように変更します.
    整理する

  • 配列の特定の値を変更する場合は、spreadを使用して既存の配列に影響を与えないようにします.setState([...기존 배열, 새로 추가된 내용])

  • 配列内の各要素にアクセスする場合はmap関数を使用します.

  • map関数
    map関数は,物品の固有値をキー値として一緒に置くことを提案する.
    • users.map(
    (user,index) 
    => (<User user={user} key={index} />),
)
    レンダリングの結果がどのオブジェクトを指しているかを正確に知るにはkey値が必要です.
    このようにしてこそ、動作がより速く、より効率的になります.
    Response
    android startActivity ForResultに基づく学習心得のまとめ