[React] state Array 삽입 및 삭제

목표

Array 형식의 state의 원소를 추가 및 삭제해본다.

 

Array state 추가 삭제 문법

let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']);
let [따봉, 따봉변경] = useState([0,0,0]);
let [inputVal,setInputVal] =useState('');

위와 같이 정의된 state들을 함수들을 통해 변형해보자

 

1. Array state 추가 - unshift

<input onChange={(e)=>{setInputVal(e.target.value);}}/>
<button onClick={()=>{
    let copy=[...글제목];
    copy.unshift(inputVal)
    글제목변경(copy);
    let addLike = [...따봉];
    addLike.unshift(0)
    따봉변경(addLike);
}}>만들기</button>

unshift 함수를 사용하여 배열의 가장 좌측에 입력한 원소를 더해준다.

 

2. Array state 삭제 - splice

글제목.map(function(a,i){
  return(
    <div className="list">
           ...
           ...
      <button onClick={()=>{
          let copy=[...글제목];
          copy.splice(i,1)
          글제목변경(copy)
      }}>글삭제</button>
    </div>
  )
})

splice(i,n) 함수를 사용하여 i번째 인덱스부터 n개의 원소를 삭제한다.

 

결과 화면

입력칸에서 '글 발행하기' 작성 후 버튼을 누른 후의 상태로, 목록에 입력한 텍스트 제목의 모달이 추가됐다.

 

목록에서 3번째에 있던 글을 '글삭제' 버튼 클릭해 삭제한 모습이다.

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌