[React] state에 데이터를 추가하고, 읽기
서론
저번 글은 create, update, delete 버튼을 눌렀을 때 mode값이 바뀌는 기능을 만들었었다.
그래서 이번 글엔 create를 누르고 제목과 글을 적고, 작성된 글을 볼 수 있는 기능을 만들 예정이다.
중요하다고 알려진 CRUD 중 C(create)를 만드는 것이다!
Content.js
먼저 Create, Update, Delete와 구분하기 위해 기존에 만들었던 Content.js를 ReadContent.js로 변경한다.
CreateContent.js
그리고 CreateContent.js를 만들어 위 코드를 작성한다.
onSubmit은 리액트 문법이 아니라 html 문법임을 주의하고,
사용자가 데이터를 추가, 수정하거나 삭제할 때는 method를 post로 해야 한다.
form은 action이 가르키는 페이지로 이동한다. 그러나 우리는 리액트를 사용하여 새로고침이 없는 웹을 만들기 때문에
이 동작을 e.preventDefault()로 막는다.
그리고 App 컴포넌트의 onSubmit함수에 입력받은 데이터값을 전달한다.
여기서 e.target은 input 태그, textarea 태그를 포함한 form 태그 전체를 가르키기 때문에
title.value는 input (name=title)에서 입력받은 데이터고, desc.value는 textarea (name=desc)에서 입력받은 데이터이다.
Submit이 완료되면 alert로 Submit!이라는 문자를 출력한다.
contents 배열에 새로운 데이터값 넣기
일단 새로운 배열값을 넣으려면 맨 마지막에 넣어졌던 배열의 id를 알고,
그 id에 1을 더 한 값에 새로운 배열값을 넣어야한다. 그래서 max_content_id props를 만들어주는데,
이 값은 참고정보일뿐 UI에 영향을 끼치지 않기 때문에 state에 넣지 않는다.
그리고 _article이라는 변수를 선언하고, ReadContent 컴포넌트 값을 넣어준다.
return()에 _article 변수를 보여줌으로써 화면에 title과 desc값이 나올 수 있게 된다.
가장 중요한 mode가 create일 때 코드이다.
createcontent 컴포넌트에 onSubmit 이라는 props를 추가하고 이 props는 max_content_id를 +1한다.
그리고 _contents 변수에 새로운 배열이 추가된 배열값을 넣는다.
여기서 배열 추가하는 방법은 push와 concat이 있는데 push는 원래 배열이 싹 다 변경되는 것이고,
concat은 원래 배열에 추가하는 것이기 때문에 concat을 쓰는 게 좋다.
아무튼 그 다음 setState 함수로 contents의 값을 _contents(새로운 배열이 추가된 배열)로 바꾼다.
그러면 끗!
이렇게 실행된다면 완벽 그 자체
잘 안 되거나 고칠 점이 있다면 댓글 달아주세요!