React #7. To-Do List

 

나의 할일을 입력 태그에 작성하고 Add To Do 버튼을 누르면 할일 리스트에 추가되면서 리 랜더링되는 간단한 투두리스트이다. 중요한 부분은 Submit 이벤트를 form 태그에 걸어두고 제출 이벤트가 감지되면 서버로 보내지 않고 왜냐하면 보낼 서버가 없음. 할일 목록을 저정하는 toDos 에 추가하고 li 태그로 리 랜더링한다.

 

<form onSubmit={onSubmit}>
    <input 
      value={toDo} 
      onChange={onChange}
      type="text" 
      placeholder="Write your to do..."></input>
    <button>Add To Do</button>
</form>

# 제출 이벤트를 감지해서 
const onSubmit = (event) => {    
	# 고유 동작을 중지시킨다.(submit 을 중지)
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    # [1, ...<list>] -> [1,2,3,4] 으로 리스트가 반환된다. 유용함!
    # 반대로도 가능함 [...<list>, 4]
    setToDos((currentArray) => [toDo, ... currentArray])
    setToDo("");
};

 

map() 함수는 배열을 가지고 있을 때 각각의 element들을 바꿀 수 있게 해줌map() 은 ()에 함수를 넣을 수 있는데 배열의 모든 item에 대해 실행됨 여기서 key 는 요소의 고유성을 부여하기 위해서 key 속성을 지정해줘야한다.

리스트와 Key – React (reactjs.org)

리스트와 Key – React

 

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