[React] 10. 리액트 스터디 - 배열

useState를 이용하여 배열 변수를 처리하는 방법에 대해서 공부

 

useState를 이용하여 배열을 선언하고

해당 배열에 input text 에서 입력한 값을 하나씩 추가하여 넣는 방법으로 TO DO 리스트가 화면에 출력되도록 처리해본다.

...배열명 
setToDos((currentArray) => [toDo, ...currentArray]);
* setToDos 와 같이 변경 함수에는 변수 및 함수를 파라미터로 지정할 수 있다.

현재 배열의 맨 앞 요소에 새로운 item(값)을 push

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === "") {
      return;
    }
    
    // 현재 배열에 입력한 값을 1개 추가하여 
    // 새로운 배열을 생성
    setToDos((currentArray) => [toDo, ...currentArray]);
    setToDo("");
    
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do..." />
        <button>Add To Do</button>  
      </form>
    </div>
    );
}

export default App;

 

[ map ] 

배열의 요소만큼 반복하여 특정 이벤트를 처리하기 위해 사용 

arr.map((item) => console.log(item))
배열의 요소를 1개씩 콘솔로 출력한다.

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === "") {
      return;
    }
    
    // 현재 배열에 입력한 값을 1개 추가하여 
    // 새로운 배열을 생성
    setToDos((currentArray) => [...currentArray, toDo]);
    setToDo("");
  };
  console.log(toDos);
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} type="text" placeholder="Write your to do..." />
        <button>Add To Do</button>  
      </form>
      <hr />
      {toDos.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </div>
    );
}

export default App;