배열에 항목 제거하기

• 배열내장함수인 filter를 사용하여 false인 값만 담는다.

• 태그에서 변수를 전달하고 싶을땐 아래와 같이 작성한다.
  <button onClick={() => onRemove(param)}>

---

Q. onClick ={()=> onRemove(use.id)} 이 코드는 잘 작동하는데,
onClick={onRemove(user.id)} 이 코드는 왜 동자하지 않는걸까?

A. onClick={someFunction()} 을 해버리면 해당 컴포넌트가 렌더링이 되는것과 동시에 someFunction함수를 실행시켜 버린다.

그래서 보통 onClick={someFunction} 으로 지정해서 ()를 제와하는 방법으로 함수가 즉시 실행 되지 않게 하고, 클릭했을 때 실행이 되도록 해준다.

그런데 예제와 같이 onRemove의 경우, 해당 함수가 실행될 때 아이디 값도 받아와야하기 때문에,
이런 경우에 onClick={onRemove(user.id)}를 해버리면, 해당 컴포넌트가 렌더링됨가 동시에 이 함수 실행이 되어버려서 아마 아무것도 렌더링이 되어버리지 않을 것이다. 콘솔에서도 오류가 발생함

따라서 이런 문제들을 해결하기 위해 onClick에 콜백함수를 넣어주고, 해당 함수가 실행될 때 use.id를 건네주어 실행시키는 방법으로 처리를 한다.

---

App.js

// import logo from './logo.svg';
// import './App.css';
import React, { useRef, useState } from "react";
import CreateUser from "./CreateUser";
import UserList from "./UserList";

function 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: 'jini',
        email: 'genie9105@gamail.com'
    },
    {
        id: 2,
        username: 'biki',
        email: 'biki@gmail.com'
    },
    {
        id: 3,
        username: 'nado',
        email: 'nado@gmail.com'
    }
  ]);

  const nextId = useRef(4); //useref의 초기값은 4

  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    // setUsers([...users, user]); 1번째 방법
    setUsers(users.concat(user)); //2번째 방법
    
    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
		// user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id가 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;

UserList.js

import React from "react";

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 => (
                        <User 
                            user={user} 
                            key={user.id} 
                            onRemove={onRemove}
                        />
                    )
                )    
            }
        </div>
    )
}

export default UserList;

CreateList.js

import React from "react";

//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;

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C