[REACT] 배열 항목 제거하기

<벨로퍼트 님의 리액트 입문 부분 참고하여 공부 중입니다>

https://codesandbox.io/s/3-baeyeolsagjebeoteunmandeulgi-forked-lg06u?file=/src/CreateUser.js:0-451

App.js, UserList.js, createUser.js를 만들어서 app을 렌더링하여 화면에 보여줌.

App.js :
UserList.js : User 컴포넌트, UserList 컴포넌트가 있으며 UserList를 export함
createUser.js : 4개의 props를 받아와 2개의 input과 등록 버튼 1개를 생성.

UserList.js

import React from "react";

const User = ({ user, onRemove }) => {
  return (
    <div>
      <b>이름 : {user.username}</b>
      <span>이메일 : {user.email}</span>
      <button onClick={()=>onRemove(user.id)}>삭제</button>
    </div>
  );
};

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

export default UserList;

-UserList에서 props로 받아온 값들을 다시 User에 넘김
-User : 이름, 이메일 옆에 삭제 버튼.

onClick = {()=>onRemove(user.id)}
onClick = {onRemove(user.id)}

-onClick 이벤트가 발생하여야 콜백함수가 실행되면서 onRemove함수를 호출함.
-2번째 줄처럼 사용하게 된다면 해당 컴포넌트 렌더링될 때 동시에 실행되면서 user.id를 받아올 수 없어 오류가 나게 되거나 아무것도 실행되지 않게 됨.

createUser.js

import React from "react";

const CreateUser = ({ username, email, onCreate, onChange }) => {
  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;

• input value : setInputs과 연동하여 state에 반영되는 내용도 input DOM에서 보이도록 하기 위하여 value값도 써줌.

  value = state값과 연동(화면에서도 비춰주기 위해서)
  name = 이벤트 발생 시 참조하며 새로운 객체 상태 업데이트 시 키로 쓰임. [name]:'someThing' 형태

App.js

import React, { useRef, useState } from "react";
import CreateUser from "./CreateUser";
import UserList from "./UserList";

const App = () => {
  const [inputs, setInputs] = useState({
    username: "",
    email: ""
  }); 
  const { username, email } = inputs;
  
  const onChange = (e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: "velopert",
      email: "[email protected]"
    },
    {
      id: 2,
      username: "tester",
      email: "[email protected]"
    },
    {
      id: 3,
      username: "liz",
      email: "[email protected]"
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));
    //setUsers([...users, user])와 같은 방식임.
    //새로운 배열 객체 리턴.
    setInputs({
      username: "",
      email: ""
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    setUsers(users.filter(user=>user.id!==id))
  }
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
};

export default App;

-2개의 state 생성 :

const [inputs, setInputs] = useState({
    username: "",
    email: ""
  }); 
const { username, email } = inputs;
  

-비구조화 할당 :const { 변수명1, 변수명2 ...} = { 속성명:속성값, ...}
-즉, inputs의 username, email을 App.js에서 자유롭게 사용하기 위해 비구조화 할당.(식별자 역할.)

-setInputs:input 상태 변경에 따른 onChange와 버튼을 눌렀을 때 동작하는 onCreate 에서 동작
-setUsers: users 상태 최신화(등록, 삭제)

  const onChange = (e) => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };

onChange : 비구조화 할당을 통한 input의 name, value 값을 알아낸 후 동적으로 state 값 변경함.(단순히 input값들만 변경되는 것이므로 화면에서는 구현되지 않음)
->객체 내부에서 키를 []로 감싸면 실제 key가 됨
[email] : '[email protected]' == {'email':'[email protected]'}

input DOM : createUser에서 정의한 속성들
->name, placeholder, onChange, value를 e.target을 통해 받아올 수 있음.

    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

setUsers(users.concat(user));
기존 state인 users(배열)에 새로운 배열 객체를 넘겨줌.

  const onRemove = id => {
    setUsers(users.filter(user=>user.id!==id))
  }

id가 선택된 경우에는 배열에 미포함하여 새로운 배열 객체를 만들어서 state에 갱신함
->id=4인 것을 삭제한다면, id=1,2,3은 선택된 user.id와 일치하지 않으므로 filter에서 True를 리턴하므로 새로운 배열 객체로 반환됨.

filter 함수

배열에서 특정 조건을 만족하는 값들을 모아 새로운 배열 객체로 만들어줌.
파라미터로는 조건을 검사하는 함수를 넣어줘야 함
True, False 값을 리턴하며 True값을 리턴한 경우에만 배열로 만듦.