React 공부 4일차

*복습: form은 기본적으로 submit이라는 event를 갖고있음.

 

<간단한 to-do list 만들기>

import {useState, useEffect} from "react";

function App(){

  const[toDo, setToDo]=useState(""); //매번 입력받는 to-do list 항목 하나를 저장하는 state

  const [toDos, setToDos]=useState([]); //to-do list 전체 항목이 담긴 배열을 저장하는 state

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

  const onSubmit=(event)=>{

    event.preventDefault(); //form의 default event들을(ex) submit) 실행하지 않도록 막아줌. 

    console.log(toDo);

    if(toDo==="") return;

    //toDo와 currentArray의 원소를 하나의 원소로 합침

    //첫 번째 to-do를 입력할 때 비어있는 currentArray 받아옴

    setToDos((currentArray) => [toDo, ...currentArray]);//새로 입력받은 toDo와 기존의 항목들을 배열 하나로 합침.

    //state는 직접 수정 불가능 (toDo="" (X))

    setToDo("");};

    console.log(toDos);

    return (

  <div>

    <h1>My To Dos ({toDos.length})</h1>

    <form onSubmit={onSubmit}//submit event가 발생하면, onSubmit 함수 실행

      <input

      onChange={onChange}//change event가 발생하면, onChange 함수 실행

      value={toDo}

      type="text"

      placeholder="Write to-do..." />

      <button>Add To Do</button>

    </form>

    <ul>

      {toDos.map((item,index)=>{ //arg1: item(value), arg2: key(index)

        return <li key={index}>{item}</li>

      })}

    </ul>

  </div>);

}

export default App;

1) form 태그 안, <input /> & <button /> 태그 존재

2) input의 change event가 일어나면, onChange 함수에 따라 input value값이 setToDo함수에 의해 update됨.

3) button을 눌러 submit되는 순간, onSubmit 함수에 의해 form의 default event들 실행 x, 기존 array원소들과 새로 입력받은 toDo 원소가 하나의 배열로 합쳐짐.  setToDos((currentArray) => [toDo, ...currentArray]);//배열 합칠때 "..."꼭 써야함.

4) map 함수를 이용해, 배열의 각 원소들을 순환하면서 list로 만들어버림. 

 

***map 함수***

ReactJS는 map을 사용하면 element에 key를 줘야함.

Array.map() 함수는 callBackFunction을 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다. 

콜백 함수는 배열의 각 요소에 실행된다.

map 함수에 대한 다양한 예시들

https://www.freecodecamp.org/korean/news/javascript-map-method/