React list 항목 수정

list 항목 수정하기

챔피언의 이름을 누르면 op 마크를 달 수 있도록 만들어보자.

• App.js

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

  function Champion({champion, onRemove, onToggle}){
    return(
      <div>
        <b style={{cursor:'pointer'}} onClick={()=>onToggle(champion.id)}>{champion.name}</b> <br/>
        <span>스킬: {champion.skill}</span>
        <div style={{color : 'red'}}>{champion.op && <b>OP 챔피언</b>}</div>
        <button onClick={() => onRemove(champion.id)}>삭제</button>
        <div><br/></div>
      </div>
    )
  }

  function ChampionList({champions, setChampions}) {

    const onToggle = (id) => {
      setChampions(
        champions.map(champion => 
          champion.id === id ? {...champion, op: !champion.op} : champion))
    }

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

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

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

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

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

  export default App;

• 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();

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

onToggle 함수를 만들어 champion의 op속성이 변경되도록 만들었다.