구현할 부분: 댓글 달기
댓글을 작성했을 때, 그 작성한 내용이 위로 들어가게 한다.
댓글창에 내용이 있을 때만 게시 버튼이 활성화된다.
state 설정
우선 나는 state 부분에 두 가지를 미리 설정해 놓았다.
내가 방금 쓴 하나의 댓글을 comment로, (문자열)
내가 그동안 쓴 댓글들을 넣을 comments ( 배열 )
그리고 form 부분에는 두가지 이벤트 핸들러를 달았다.
댓글을 다는 input 부분에는 onChange, 게시 버튼에는 onClick으로.
사실 처음에 form 태그에 onSubmit으로 했었는데 이렇게 했을때 내가 게시 버튼을 누른 후에 인풋에 내가 쓴 내용이 안사라지고 남아있어서 onClick을 버튼에 다는 걸로 바꿨다.
- 댓글창에 쓴 내용을 어떻게 불러올까?
handleComment 함수에서 e.target.value를 하고 콘솔로그로 확인을 해보면 내가 친 내용이 바로바로 나온다. 원래는 비어있던 this.state.comment의 부분에 우리가 친 댓글을 넣어야한다.
그래서 setState로 그 내용을 바꿔준다.
- 게시 버튼을 눌렀을 때, 실행되는 handleSubmit 함수
게시 버튼을 눌렀을 때, 페이지가 넘어가는 것을 막기 위해서 preventDefault()를 한다.
댓글을 입력했을 때만 게시 버튼이 활성화되도록 this.state.comment에 내용이 있는지를 확인하는 if문을 작성한다.
비어있었던 this.state.comments 배열에 push를 해준다.
생활코딩 강의를 보았을 때는 concat을 했었어서 나도 concat으로 했었는데 그렇게 하지 않아도 된다.
왜나햐면 생활코딩에서는 원래 있는 데이터에 추가하는 것이라서 그 원래의 데이터를 변하지 않게 하는 것이 중요한 경우였고 여기서는 빈 배열에 넣어주는 것이기 때문에 push를 해도 된다.
이때 push를 해서 넣는 데이터는 객체의 형태이다.
이 객체에는 id, user, contents 가 프로퍼티로 들어간다.
id는 그 댓글이 몇번째 댓글인지를 알려주기 위해서 설정해 놓은 부분이다.
max_content_id라는 값을 state가 아닌 그 위의 부분에 정의 해놓았다. 이 id의 값은 코딩을 하는 우리에게 중요한 정보이지 사용자에게 보여지는 부분은 아니기 때문에 state에 있으면 안된다고 한다.
이걸 통해서 우리는 각각의 댓글에 번호를 부여하고, 전체 댓글이 몇개가 있는지를 파악할 수 있다.
댓글이 submit 될 때마다 이 id가 1씩 늘어나게 했다.
user은 이 인스타그램에서는 사용자는 나밖에 없기 때문에 우선은 내 아이디로 써 놓았다. ( 만약 이게 정말 돌아가는 인스타그램이라면 유저의 아이디로 들어갈 부분이 될것이다. )
댓글 contents는 handleComment에서 바꾸어 놓은 this.state.comment로 넣어놓았다.
그리고 submit 버튼을 눌렀을 때, input 부분이 초기화 될 수 있도록 setState로 comment를 다시 빈 문자열이 되게 하였다.
콘솔로그로 this.state.comments 를 쳐보면 이렇게 배열안에 들어간 것을 볼 수 있다.
- 댓글을 랜더링하기
어려웠던 부분. 댓글을 넣기 위해서 배열 안에 객체가 계속 들어가게 만들어놓았는데 어떻게 이걸 태그 부분으로 들어가게? 랜더되게 할 것인가?
화면이 랜더링 될때 실행되어야 하기 때문에 render()에 들어간다.
각 댓글 하나하나를 만들기 위해서서는 comments의 댓글들 하나하나를 가져와야 한다. 그러므로 map을 써야 한다.
reply는 댓글 하나! { id : 1, user: "hwanggee20" , contents : "amazing!😍"}
나는 div 태그 안에 span 태그로 아이디와 댓글들을 넣었었다. 각각의 태그 안에 기존의 css 클래스를 넣고, 그 안에 들어가는 내용은 객체에서 프로퍼티로 불러온다.
이때 이걸 감싸는 div 태그에 key값이 필요하다. 이때 id의 값을 넣어준다.
commentsList를 콘솔로그에 쳐보면
우리의 코딩해놓은 대로 태그들과 내용이 생성되어 있는 것을 확인할 수 있다.
이 태그들이 들어가야할 부분에 {commentsList} 를 넣는다.
짜잔! 랜더링 되었습니다.👏🏻
콘솔로그에도 우리가 작성한 태그들이 잘 들어가 있는 것을 확인할 수 있습니다.
