React list 항목 제거

list 항목 제거하기

list에 항목 제거 버튼을 추가하여 특정 항목을 삭제할 수 있도록 해보자.

• App.js

  import React,{useRef, useState} from 'react';
  import './index.css';
  import CreateChampion from './CreateChampion';

  function Champion({champion, onRemove}){
    return(
      <div>
        <b>{champion.name}</b> <br/>
        <span>스킬: {champion.skill}</span>
        <button onClick={() => onRemove(champion.id)}>삭제</button>
        <div><br/></div>
      </div>
    )
  }

  function ChampionList({champions, setChampions}) {

    const onRemove = (id) => {
      setChampions(champions.filter( champ => champ.id !== id));
    }

    return (
      <div>
        {champions.map(champion =>(
          <Champion champion={champion} key={champion.id} onRemove={onRemove}/>
        ))}
      </div>
    );
  }

  function App(){
    const listId = useRef(4);

    const [champions, setChampions] = useState(
      [
        {
          id: 1,
          name: '갱플랭크',
          skill: '혀어어어업상'
        },
        {
          id: 2,
          name: '갈리오',
          skill: '단호한 일격'
        },
        {
          id: 3,
          name: '가렌',
          skill: '결정타'
        }
      ]
    )

    return(
      <div>
        <CreateChampion listId={listId} champions={champions} setChampions={setChampions}/>
        <ChampionList champions={champions} setChampions={setChampions}/>
      </div>
    )
  }

  export default App;

• CreateChampion.js

  import React,{useState} from 'react';

  function CreateChampion({listId, champions, setChampions}){
      const [inputs, setInputs] = useState({
          name : '',
          skill : ''
      });
      const {name, skill} = inputs;

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

      const onInsert = () => {
          const Champion = {
              id: listId.current,
              name: name,
              skill: skill
          }
          console.log(Champion)
          setChampions(champions.concat(Champion));
          setInputs({
             name: '',
             skill: ''
          })
          listId.current+=1;
      }

      return(
          <div>
              <input name="name" onChange={onChange} placeholder="챔피언 이름" value={name}/>
              <input name="skill" onChange={onChange} placeholder="스킬" value={skill}/>
              <button onClick={onInsert}>등록</button>
          </div>
      )
  }

  export default CreateChampion;

• index.js

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import reportWebVitals from './reportWebVitals';
  import App from './App'

  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

  reportWebVitals();

filter를 사용하여 해당 항목의 삭제 button 클릭 시 해당 id를 걸러내도록 onRemove를 작성하였다.