React useState list에 push 하기 - state에 리스트를 쓰고 싶어요

리액트의 useState 에 리스트를 사용하고 싶어서 삽질을 많이 했다...

 

const [list, setList] = useState([])

이 리스트에 값을 담고 싶을 때 보통 push 를 사용하지만, state 이기 때문에 push 반영이 제대로 안된다

 

리스트에 값 넣기

---

setList([...list, text])

push 대신 위와 같이 사용하면 리스트 안에 값이 들어간다

 

리스트 값 빼기

---

list.splice(list.indexOf(뺄 값), 1)
setList([...list])

값을 삭제할 때도 위와 같이 사용하면 제대로 state 에 반영되는 것을 볼 수 있다

​

 

예시코드

---

import { useState } from 'react';

const App = () => {
  const [text, setText] = useState('')
  const [list, setList] = useState([])

  const handleInput = (e) => {
    setText(e.target.value)
  }
  const handleButton = (e) => {
    setList([...list, text])
  }

  return (
    <div style={{margin: '20px', border: '1px solid #ccc'}}>
      <input type="text" onChange={handleInput} />
      <input type="button" value="등록" onClick={handleButton} />
      {list.map((item, idx) => <p key={idx}>{item}</p>)}
    </div>
  );
}

export default App;