React - (9) 배열에 데이터 추가

저번 글에 이어서 배열에 데이터를 추가하는 방법을 알아보자.

기존 배열을 상태관리로 변경

기존 배열의 변경에 리렌더링을 하기 위해서는 상태관리가 필요하다. 그러므로 기존 배열을 상태관리로 변경하자.

const [todos, setTodos] = useState([
  {
    id: 1,
    content: "내용 1"
  },
  {
    id: 2,
    content: "내용 2"
  },
  {
    id: 3,
    content: "내용 3"
  },
])

입력 form 및 상태관리 생성

기존 TodoList 컴포넌트에 배열에 추가할 데이터 입력을 위한 input, button 을 만들고, 상태관리를 하자.

// ToDoList.js
const [content, setContent] = useState("");

return (
  <div>
    <input value={content} onChange={onChange} />
    <button onClick={onAdd}>추가하기</button>
    {/* ... */}
  </div>
)

onChange 함수 생성

const onChange = (e) => {
  setContent(e.target.value);
}

onAdd 함수 생성

입력한 내용을 배열 todos 에 추가해줘야 한다. 객체와 마찬가지로 배열도 상태를 변경할 때

const nextId = useRef(4);

const onAdd = () => {
  const todo = {
    id: nextId.current,
    content
  }
  // 스프레드 문법을 이용한 방법
  setTodos([...todos, todo])
  
  // concat을 이용한 방법
  // setTodos(todos.concat(todo))

  
  setContent("");
  nextId.current += 1
}

여기서 사용한 useRef 는 컴포넌트 안에서 사용할 변수를 관리하는 Hook 이다.
state 와 props 와 다른 점은 useRef 로 관리하는 변수는 값의 변경이 발생해도 컴포넌트가 리렌더링 되지 않는다는 점이다.
즉, 순수하게 값만 바꾸기 때문에 컴포넌트의 리렌더링이 필요없을 때 사용할 수 있다.
.current 로 전달된 인자로 접근 및 수정할 수 있다.