[React] 배열에 항목추가하기

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.배열에 항목추가하기

리액트에서 배열에 항목을 추가하는 방법은 상태를 관리하는 훅인 useState를 사용하여 상태를 업데이트하는 것입니다.
배열에 새로운 항목을 추가할 때는 기존 배열을 복사하고, 새로운 항목을 추가한 후에 상태를 업데이트합니다.

 

 

1-1.useRef로 변수 생성

names: 이름 목록을 저장하는 배열 상태입니다.
input: 입력 필드의 값을 저장하는 상태입니다.

const [names, setNames] = useState(['Alice', 'Bob', 'Charlie']);
const [input, setInput] = useState('');

 

 

1-2.입력 필드 값 변경 함수

입력 필드의 값을 업데이트합니다.

const handleChange = (e) => {
  setInput(e.target.value);
};

 

 

1-3.항목 추가 함수

입력 필드의 값을 배열에 추가하고, 입력 필드를 초기화합니다.
[...names, input]: 기존 배열을 복사하고 새로운 항목을 추가합니다.

const handleAdd = () => {
  if (input.trim() === '') return; // 빈 입력 무시
  setNames([...names, input]); // 새로운 이름을 배열에 추가
  setInput(''); // 입력 필드를 초기화
};

 

 

 

 

1-4.컴포넌트 반환 JSX

<input>: 사용자가 입력할 수 있는 입력 필드입니다.
<button>: 사용자가 클릭하여 항목을 추가할 수 있는 버튼입니다.
<ul>: 이름 목록을 렌더링합니다.
names.map((name, index) => (<li key={index}>{name}</li>)): names 배열을 순회하면서 각 이름을 <li> 요소로 렌더링합니다.

return (
  <div>
    <input
      type="text"
      value={input}
      onChange={handleChange}
      placeholder="Enter a name"
    />
    <button onClick={handleAdd}>Add Name</button>
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  </div>
);

 

 

 

 

 

 

 

 

 

 

 

 

 

import React, { useState } from 'react';

function NameList() {
  // 상태로 names 배열과 input 상태를 정의
  const [names, setNames] = useState(['Alice', 'Bob', 'Charlie']);
  const [input, setInput] = useState('');

  // 입력 필드의 값을 변경하는 함수
  const handleChange = (e) => {
    setInput(e.target.value);
  };

  // 새로운 이름을 names 배열에 추가하는 함수
  const handleAdd = () => {
    if (input.trim() === '') return; // 빈 입력 무시
    setNames([...names, input]); // 새로운 이름을 배열에 추가
    setInput(''); // 입력 필드를 초기화
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleChange}
        placeholder="Enter a name"
      />
      <button onClick={handleAdd}>Add Name</button>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default NameList;