react 배열 state에 항목 추가 / 삭제

1. 배열 state에 항목 추가

input 입력란에 text를 입력. 엔터키를 치면 글제목 배열 state 맨앞에 항목 추가됨.

spread 연산자 사용

• 기존 배열에 새 항목을 포함하는 새로운 배열 생성.
• 앞에 넣으면 앞쪽에 뒤에 넣으면 뒤쪽에 새 항목이 추가된 채로 생성됨.

  let [글제목, 글제목변경] = useState([
    "첫번째 글제목",
    "두번째 글제목",
    "세번째 글제목",
  ]);
  //엔터키 누를때 실행되는 함수
  const activeEnter = (e) => {
    if (e.key === "Enter") {
      const inputText = e.target.value;
      //글제목 array state 맨앞에 추가. spread 연산자 사용.
      //새 항목을 포함하는 새로운 배열 생성. 앞에 넣으면 앞쪽에 생성됨.
      let copy = [inputText, ...글제목];
      글제목변경(copy);
    }
  };
 //입력란.
 <input type="text" onKeyDown={(e) => activeEnter(e)} />

추가한 결과

2. 배열 state에 항목 삭제

글제목 옆의 삭제버튼 클릭 시, 글제목 배열 state의 해당 항목 삭제.

filter 함수 사용

• 삭제할 글제목과 다른 배열 요소들만 필터링하여 반환.
• 이후 재렌더링. 필터링된 배열 state가 나타남.

  let [글제목, 글제목변경] = useState([
    "첫번째 글제목",
    "두번째 글제목",
    "세번째 글제목",
  ]);
  //글제목 옆의 삭제버튼 클릭시 실행되는 함수.
  const deleteOne = (삭제할글제목) => {
    let copy = [...글제목];
    //filter 함수 사용.
    //삭제할글제목과 다른 배열 요소들만 필터링하여 반환. 재렌더링.
    글제목변경(copy.filter((a) => a != 삭제할글제목));
  };
<button onClick={(e) => deleteOne(글제목[i])}>삭제</button>

삭제한 결과