글쓰기와 글 목록보기를 구현해보자.
오른쪽에 Listpage와 WritePage를 만들고 라우터로 연결하였다.
그리고 리스트페이지에 임의의 데이터를 만들고 화면을 만들었다.
그 다음 글쓰기 페이지 또한 input 박스와 글쓰기 버튼을 만들고 버튼 클릭시 실행될 함수도 만들어 주었다.
원래 기본 로직은 WritePage에서 쓴 내용을 DB에 insert하고 ListPage에선 DB에 있는 내용을 바로 다운로드해서 뿌리게 되는건데 지금은 화면밖에 없으니 WritePage에서 데이터를 바로 ListPage로 바로 넘길 방법이 없다.
그렇기에 여기선 라우터를 지우고 하나의 페이지에서 해보자.
writepage에 있는걸 모두 가져왔고 input태그에 있는 값을 가지고 오려면 ref를 써야하는데 이거 말고 input태그에 상태를 달아서 값을 가져오는 방법도 있다.
이렇게 1건짜리 post를 만들고 각각의 id,title,content에 공백을 넣었다.
그리고나서 input태그 value값에 방금 만든 post.title과 post.content를 넣는다.
하지만 저렇게만하면 setState가 호출이 안되기에 그림이 다시 그려지지 않아서 글자가 나오지 않는다. 입력 자체가 안됨. 오로지 setState로만 변경을 할 수 있기때문
이런식으로 onChange 함수를 써서 편하게 할 수 있다. 이 코드는 인풋태그에 변화가 일어나면 이 컨텍스트를 가지고 각각 handleChangeTitle,Content 함수로 간다.
e를 콘솔로 찍어보면 키를 누를때마다 인풋박스에 입력은 되지 않지만 콘솔에 저런식으로 계속 찍힌다.
거기서 e.target.value로 받은 value값을 setPost에 저장시키면 이렇게 입력이 가능해진다.
content도 마찬가지로 바꿔준다. 그리고 이렇게만 하면 input하나에 함수 하나씩 계속 만들어야하는데 이걸 한방에 하는 방법이 있다.
둘다 같은 함수인 handleForm이 실행되게 하고 각각 input 태그에 name을 주었다.
그리고 그 name과 value에 대한 콘솔을 찍어보았다.
title부분에 ㅁ을 입력했고 content부분에 2를 입력했더니 각각 콘솔에 저렇게 뜬다.
이제 여기서 자바스크립트의 특이한 문법인데, computed property names라는 문법이다.
setPost에 언제는 content, 언제는 title이 들어와야하므로 동적으로 들어와야한다.
이렇게 대괄호로 감싸면 저 name이 키값으로 할당이 된다. 변수를 동적으로 만들어내고 키값에 변수로 값을 넣을 수 있음.
post.title과 post.content로 각각 콘솔을 찍어보면 잘 받아지는것을 볼 수 있다.
자 이게 값을 넣을건데 setPost에 ...post로 첫시간에 배웠던 배열을 복사해서 값을 추가하는 방식으로 넣어야한다. 안그러면 제목부분을 입력하고 내용부분을 입력할때 제목부분에 입력했던 것들은 날라가서 내용부분만 입력되기때문. 그리고 setPosts에 입력한 post내용을 추가하면서 상태를 변경시킨다.
뭐.. 번호는 안넣었으니 당연히 안들어가고 제목6과 내용6이 잘 들어오는 것을 볼 수 있다.
오늘 게시물은 여기까지
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
