React state, effects, props 연습해보기

To-Do List 만들기 (state연습)

function App(){
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) =>{
    setToDo(event.target.value);
  };
  const onSubmit = (event) =>{
  	event.preventDefalut();
    if(toDo ===""){
      return;
    }
    setToDo("");
    setToDos((currentArray) => {toDo, ...currentArray});
    /* 
    {todo, ...currentArray} 배열안에 값을 이어지게 한다.
    예를들어서, currentArray에 "hello"라는 값이 들어가 있다고 가정하고, 새로운 값으로 "hi"를 넣으면 
    그럼 setToDos(("hello") => {"hi", "hello"});가 된다.
    그리고 두번째 새로운 toDo로 "bye"를 넣으면,
    setToDos(("hi","hello") => {"bye", "hi", "hello"});가 된다.
    */
  };
  const countToDo = toDos.length;
  
  return (
    	<div>
    		<h1>My To Do({countToDo})</h1>
        	<form onSubmit={onSubmit}>
            	<input 
    				onChange={onChange} 
					value={toDo} 
					type = "text" 
					placeholder = "please write your to do..."
				></input>
            </form> 
        </div>
    )
}

map() 기능 설명

하나의 배열안에 있는 아이템들을 내가 원하는 값 또는 기능으로 전환시키고 새로운 배열을 출력할 수 있다.
예를들어.
["1","2","3","4","5","6"].map(()=>":)");
위코드를 실행시키면 return 값으로
[":)",":)",":)",":)",":)",":)"] 가 생성된다.

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

화면에 to-do리스트 형식으로 출력하는게 저 한줄로 끝남. ㅎ. 신기해 o_O

[전체코드]

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (events) => {
    setToDo(events.target.value);
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    setToDo("");
    setToDos((currentArray) => [toDo, ...currentArray]);
  };
  const countToDo = toDos.length;
  console.log(toDos);

  return (
    <div>
      <h1>My To Do (How many things to do today : {countToDo})</h1>
      <form onSubmit={onSubmit}>
        <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>
        ))}
      </ul>
    </div>
  );
}

export default App;