[React] input 2 / title state배열에 값 추가하기 .push()

리액트 블로그 프로젝트 중

글 제목 리스트에 사용자가 입력한 데이터를 추가하는 기능을 만들어보려한다.

 

push() 메서드를 사용할 것인데, 배열에 값을 추가해주는 함수로는

push(), unshift() 등이 있다.

순서대로 배열 끝에 요소 추가, 배열 앞에 요소 추가이고 unshift() 메서드는 나중에 따로 글 정리를 하겠음.

 

push() 메서드를 사용하여 input 태그에 입력한 값을 추가해보도록 하겠다.

 

먼저 input하는 제목을 관리할 state를 만들어준다.

 

 

그리고 이 state를 사용하도록 JSX를 작성한다.

이렇게 작성하면 제목 list는 추가 되지만 원하지 않는 상황이 생길것임

이렇게 작성하면 추가되긴 하지만 아래 이미지와 같이 타이핑 할때마다 리스트가 계속 생긴다.

키보드를 누를때마다 리스트가 생성됨

이런 상황을 해결하기 위해서 handleAddTitle이라는 함수를 만들고 등록 버튼을 만들어
버튼을 누를 시에 리스트가 추가되도록 코드를 수정하는게 좋을 것 같다.

button을 만들고 input 수정을 해준다

우선 등록이라는 버튼을 만들고 onClick시에 handleAddTitle이라는 함수가 작동되도록 한다.

그리고 input에서는 setInputTitleValue 함수를 이용해서 state만 변경해주도록 한다.

handleAddTitle 함수를 만들고

그리고 handleAddTitle 함수에서

먼저 copyTitle 이라는 복사본을 만들고

.push() 함수를 이용하여 input에서 입력한 값으로 변경이 됐을 inputTitleValue를  copyTitle(배열)에 추가해준다.

그후 setTitle 함수에 copyTitle을 넣어주면

title state는 copyTitle로 변경될 것임

마지막으로 input 태그를 빈칸으로 만들기위해 setInputTitleValue 함수에 '' 빈 문자열을 보내주면

등록 버튼을 눌렀을 때 글 제목이 잘 추가되어 랜더링 될 것이다!

 

잘 등록된다!