리액트 - 초간단 ToDoList

업데이트 히스토리

2023.10.09 - ToDoList 코드 작성

import { useState } from "react";


function App() {
  const [toDo, setToDo] = useState('');
  const [toDos, setToDos] = useState([]);



  const onSubmit = (event) => {
    event.preventDefault();
    

    if(toDo === '') {
      return;
    }
    
    setToDo('');
    setToDos(currentArray => [toDo, ...currentArray]);
  }

  const onChange = (event) => setToDo(event.target.value);

  console.log(toDos);

  return (
    <div className="App">
      <form onSubmit={onSubmit}>
        <h1>to-do-list</h1>
        <input onChange={onChange} value={toDo} type="text" placeholder="텍스트 입력 창" />
        <button>저장</button>
      </form>
      {toDos.map((item, index) => <li key={index}>{item}</li>)}
      

    </div>
  );
}

export default App;

1. input태그 생성,button태그 생성

• type 속성은 text 타입으로 설정
• input태그 placeholder 속성으로 input태그 입력 필드에 적절한 값을 작성할 수 있도록 도와주록 한다

2. 상태 값을 설정하기 위해 const [toDo, setToDo] = useState(''); 선언

• toDo는 초기 값, setToDo는 toDo의 값을 수정하는 값
• useState('')은 상태 초기 값 설정으로 처음엔 빈 값으로 설정
• 직접적으로 toDo 값을 건드리지 않고 setToDo로 toDo 값을 변경

3. input태그 value 속성으로 초기값 명시 해주는데 useState 설정 값인 toDo 배열로 설정
4. onChange 이벤트로 input 입력 값이 변경되었을 때 이벤트가 발생하도록 설정

• const onChange = (event) => setToDo(event.target.value); 함수를
• const onChange = function (e) { setToDo(e.target.value); }로 사용 가능하지만 위 화살표 함수가 좀 더 간편하다

5. form태그로 감싸고 onSubmit 이벤트로 버튼 클릭 시 값을 저장할 수 있도록 한다
6. onSubmit함수 생성(onChange함수와 같이 화살표 함수로 표현)

• 버튼을 누를 때마다 페이지 reload가 되는데 이것을 막기 위해 preventDefault()함수 사용
  event.preventDefault();
• input태그 입력 필드에 빈값인 상태에서 버튼을 눌러도 값이 저장되기 때문에 이를 방지하기 위해 빈값인 경우 함수 실행을 종료시키는 if문 선언
• 버튼을 눌러 값을 저장하면 입력 필드는 값이 아무것도 없는 상태가 되어야하기 때문에 setToDo() 함수를 초기화
  setToDo('')
• 입력한 값들을 순차적 저장한 값으로 보여주기 위해 새로운 useState 선언
  const [toDos, setToDos] = useState([]);
• 입력한 값들을 순차적 저장한 값으로 보여주기 위해 함수 선언
  setToDos(currentArray => [toDo, ...currentArray]);

참조

• 노마드코더 "ReactJS로 영화 웹 서비스 만들기" 강의