[nomadcoders_React.js]ToDoApp

<전체 코드>

Index.js

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


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import React, { useState } from 'react';
function App() {
  const [toDo,setToDo]=useState("")
  const [toDos,setToDos]=useState([])
  const onChange = (event)=>setToDo(event.target.value)
  const onSubmit = (event)=>{
    event.preventDefault()
    if(toDo===""){
      return
    }
    setToDos((currentArray)=>[toDo,...currentArray])
    setToDo("")
  }
  return( 
  <div>
    <h1>My To Dos ({toDos.length})</h1>
    <form onSubmit={onSubmit}>
      <input onChange={onChange} value={toDo} type="text" placeholder='write your to do...'/>
      <button>Add To Do</button>
    </form>
    <hr/>
    <ul>
      {toDos.map((item,index)=>(
        <li key={index}>{item}</li>
    ))}
    </ul>
  </div>
  )
}

export default App;

 

+Plus

1.

  const onSubmit = (event)=>{
    event.preventDefault()
    if(toDo===""){
      return
    }
    setToDos((currentArray)=>[toDo,...currentArray])
    setToDo("")
  }

제출 버튼을 누르게 되면 setToDos function에 의해서 현재 저장된 array에 toDo가 추가 된다!

 

2.

    <ul>
      {toDos.map((item,index)=>(
        <li key={index}>{item}</li>
    ))}
    </ul>

map()메서드를 통해 toDos에 저장된 값들을 하나씩 불러와 보여주는데, item만 불러와 li 태그로 item을 호출하면 다음과 같은 오류가 뜨게 된다.

map메서드는 각 item마다 독립적인 key 값을 부여해야하기 때문! 따라서 li에 key값으로 map()메서드의 두번째 인자인 index를 변수로 받아와 넣어주면 오류가 해결된다.