[ReactJS] TIL #10

ReactJS로 To Do List 만들기 

 

리스트에 item 추가하기

...array명은 array의 모든 item들을 가리킨다

이를 이용하여 리스트에 item을 다음과 같이 추가할 수 있다

const food = [apple, banana]
const new_food = [orange, ...food]
// new_food = [orange, apple, banana]

 

 

map()

map()은 array 각각의 원소들에 대해 함수를 실행하게 하고 그 결과를 array로 return한다

map 함수의 첫번째 argument를 통해 현재의 item을 가져올 수 있다

const array = ['hello','who','are','you']
array.map(() => "mapped!") // return ['mapped!','mapped!','mapped!','mapped!']
array.map((item) => item.toUpperCase()) // return ['HELLO', 'WHO', 'ARE', 'YOU']

 

 

주의

Warnig Message: react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" pro

같은 Component의 리스트를 render할 때는 key prop을 넣어줘야 한다

react가 기본적으로 리스트에 있는 모든 item들을 인식하기 때문이다

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

 

 

To Do List ( ReactJS ver. )

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState('');
  const [toDos, setToDos] = useState([]); // to do 리스트를 담을 배열

  const onChange = (event) => setToDo(event.target.value); 
  
  const onSubmit = (event) => {
    event.preventDefault(); // Form의 Default 동작 방지
    if (toDo === "") {
      return; // input의 value인 toDo가 빈값이면 아무 동작 x
    }
    else {
      // toDo가 빈값이 아니면
      setToDos((currentArray) => [toDo, ...currentArray]) // toDos의 기본값인 []에 toDo를 추가하도록 담는다
      setToDo("") // input의 value 값을 비운다
    }
  }

  return (
    <div className="App">
      <h1>My To Do ({toDos.length})</h1>
      <form onSubmit={onSubmit}> {/* button 눌렀을 때의 eventListner 추가 */}
        <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do..."></input>
        <button>Add To Do</button>
      </form>
      <hr/>
        <ul>
          {toDos.map((item,index) => ( 
          <li key={index}>{item}</li>
          ))}
          {/* 
            toDos의 각 item들을 li 태그 안에 들어가도록 mapping
            key 속성을 index로 하여 추가하여 warning 해결
          */}
        </ul>
    </div>
  );
}

export default App;