React - input(2), state배열 추가, 삭제

이번에는 저번시간에이어 input에 사용자가 값을 입력하면 

해당 값으로 새로운글의 제목으로 작성하고 화면에 표시하고

글마다 삭제버튼을 만들어 삭제버튼을 누르면 해당글이 삭제되는 기능을 구현해보겠습니다.

 

 

1. 유저가 입력한 데이터 추가

사용자가 아래의 입력칸에 값을 입력하고 글발행을 누르면 

그 값이 새로운글의 제목이되어 목록에 추가되는 코드를 구현해야합니다.

 

예전 자바스크립트 코드로 따지면 

"버튼 누르면 유저가 입력한 글 가져와서 html을 하나 생성해주세요" 였지만 리액트에서는

"버튼 누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요" 이렇게 작성하면됩니다.(state를 변경하면 글제목.map()함수에 의해  알아서 html을 재랜더링해주기 때문에)

아래의 state에 유저가 입력한 값만 끼워넣어주면됩니다. 

let [글제목1, b] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']);

 

1. state를 먼저 카피해줍니다.
2. 카피한거에 unshift(입력값)을 해줍니다.(array자료 맨앞에 자료추가하는문법)
3. state변경함수 사용

보통 이렇게 작성하지만 저는 2번단계에서 아래와 같이 코드를 작성했습니다.

concat을 사용해서 배열 맨뒤에 자료를 추가해주어도 되고

spread을 이용해 추가해주어도 됩니다. 

 <button onClick={()=>{
        //b(글제목1.concat(입력값)); 이걸로해도 ok
        b([...글제목1, 입력값]);
        console.log(글제목1);
      }}>글발행</button>

 

Q . concat vs spread

• concat : concat함수는 기존의 배열을 수정하지 않고 새로운 원소가 추가된 새로운 배열을 만들어줍니다. 
• spread : 기존의 배열을 한번 복사하고 나서 새로운 원소 추가 

 

2. 글마다 삭제버튼

map 반복문안에 버튼을 만들어줍니다. 

그 다음에 버튼만들면 "state에서 글을 삭제해주세요"라고 코드를 작성해줍니다. 

 

처음에 저는 아래와같이 작성했습니다.

삭제버튼을 누르면 해당글의 인덱스를 이용해 해당 인덱스의 내용을 "" 처리해주었는데 결과가 이상하게 나왔습니다. 

{
        글제목1.map((a,i)=>{
          return(
             .... 
              <p>2월 17일 발행</p>
              <button onClick={()=>{
                 let deletetitle = [...글제목1];
                 deletetitle[i]="";
                 b(deletetitle);
                 console.log(deletetitle);
              }}>삭제</button>

           </div>
          )
        })
      }

이렇게 글의 제목만삭제가되고 글은 사라지지 않았습니다.

이유는 배열의 값을 삭제한게아니라 그냥 공백값을 넣은것 때문이었습니다.( 지금생각해보면 당연한것..) 

 

따라서 삭제해주는 배열함수를 사용해줍니다. 

배열.splice()함수를 이용해 삭제를 해주었습니다. 

arry.splice(x,1)이라고 하면 x번째 데이터를 삭제해주세요 입니다.

button onClick={()=>{
                 let deletetitle = [...글제목1];
                 deletetitle.splice(i,1);
                 b(deletetitle);
                 console.log(deletetitle);
              }}>삭제</button>

결과를 보면 잘 삭제가 됩니다. console창에서도 확인할 수 있습니다.

 

 

 

---

참고자료

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

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