[D+75] React를 이용해 간단한 댓글창 만들기

D+75

이전에 html과 DOM을 사용하여 간단한 댓글창을 만들어 본 적이 있다.

그래서 이번에는 리액트를 사용해 댓글창을 표현해 보기로 하였다.

해당 이미지를 보고 컴포넌트를 구상하면 되는데

일단은 전체적인 틀을 담당하는 Twittler가 필요하고,

텍스트 공간에 내용을 입력하고 '새 글 쓰기' 버튼을 누르면 댓글 하나가 추가되는데

이때 추가되는 댓글의 하나를 표현하는 SingleTweet이 필요하다.

전체적인 것을 나타내는 Twittler컴포넌트로 일단은 새 글 쓰기 버튼을 누르면 댓글 내역의 상태가 변하기 때문에

상태가 필요하기 때문에 클래스로 컴포넌트를 구상해야 한다.

또한 새 글 쓰기 버튼을 onClick 했을 경우 새로운 데이터를 만들고 상태값이 변경될 수 있는

addTweet을 만들어 버튼을 누를때마다 실행되도록 만들었다.

그리고 마지막으로 상태에 있는 tweets의 값이 랜더되면서 하나하나 띄워줘야하기 때문에

map함수를 사용해 tweet하나하나를 넘겨 넘겨줄 수 있도록 해준다.

props로 tweet을 받아온 SingleTweet은 tweet을 통해

댓글 하나의 형태를 구현하면 완성된다.

약간의 스타일까지 적용해 만든 결과물이다.

작성자는 이미 설정을 해놓고 텍스트 공간에 값을 입력하고 버튼을 클릭할 경우에

값이 밑에서 계속 추가되는 것을 확인할 수 있다.