기본 셋팅
index.html
index.jsx
App.jsx
Comment.jsx
CommentForm.jsx
CommentList.jsx
package.json
중간 확인
기능은 구현되지 않고 기본적인 밑작업만 해주었습니다.
댓글 보기
App.jsx
App.jsx에서 state에 list를 임의의 데이터로 채워주고 CommentList 컴포넌트에 props로 댓글 리스트 데이터를 보내주었습니다.
CommentList.jsx
CommentList 컴포넌트에서 props로 받은 list를 map으로 list 배열안에 갯수만큼 반복하여 각 입력값들을
<ul> <li> <span>에 채워주는 함수를 만들고 return에 이 함수를 실행하여 댓글 리스트가 바로 표시되도록 해주었습니다.
중간 확인
댓글 작성하기
이제 댓글을 직접 작성하여 App.jsx에 state안에 list를 직접 채워주도록 하겠습니다.
CommentForm.jsx
우선 CommentForm 컴포넌트에서 input에 onChage 이벤트를 등록하여 값이 바뀔때마다 handleChange 함수가 실행되게 해줍니다.
handleChange 함수는 input에 입력하는 값이 변할때마다 CommentForm 컴포넌트에 state의 value를 변경해줄것입니다.
테스트
input에 값이 변할때마다 state의 value가 바뀝니다.
App.jsx
App.jsx에서 입력한 input 내용을 인자값으로 받아 state의 list에 추가해주는 역할을 할 함수를 만들어주고 CommentForm 컴포넌트에 보내줍니다.
CommentForm.jsx
handleSubmit이란 함수를 만들어서 App.jsx에서 props로 전달받은 addList 함수를 사용하여 인자값으로 미리 만들어둔 state의 value값을 넣어줍니다.
form 태그에 onSubmit 이벤트를 걸어주고 submit 이벤트가 실행될때 handleSubmit 함수가 실행되게 해줍니다.
마지막으로 state의 value를 빈값으로 처리하여 handleSubmit함수가 실행되면 input의 값이 빈값을 바뀌게 처리해주었습니다.
이제 input에 값을 입력하고 버튼을 눌러 onSubmit 이벤트가 실행되면 입력한 input의 값이 App.jsx에 state.list의 값이 추가되어 상태가 바뀌었기때문에 CommentList의 rendlist 함수가 다시 실행되고 App.jsx에 새로 추가된 state.list를 가져와 새 댓글이 추가된 list를 화면에 render 해줄것입니다.
테스트
댓글 수정하기
CommentList.jsx
우선 state를 만들어주고 update와 value를 넣어줍니다.
span을 클릭할경우 handleClick 함수가 실행되어 state의 update를 k 값으로 변경해주게 되고 상태가 변경되었기에 리렌더링이 되어 rendList함수가 다시 실행될텐데 rendList 함수에 조건부 렌더링을 추가하여 state의 update 값이 k와 일치하는 부분만 input으로 렌더되어 값을 변경할 수 있도록 해주었습니다.
input으로 변경 내용을 수정할수 있도록 해주었으니 input 값을 수정할때 onChange 이벤트가 실행되고 handleChange 함수가 실행되어 state의 value 내용을 수정할수 있도록 설정하였습니다.
테스트
내용을 클릭하여 input의 내용을 수정해보았습니다.
App.jsx
App.jsx에서 updateList 함수를 만들어 list를 인자값으로 받아 state를 바꾸는 함수를 만들어 CommentList 컴포넌트에 props로 보내주었습니다.
CommentList.jsx
input에 onkeyDown 이벤트를 등록하여 키보드를 칠때마다 updateKeyDown 함수가 실행되도록 하였습니다.
updateKeyDown 함수에 if문을 사용하여 Enter가 아닐시에는 밑에 내용이 실행되지 않도록 설정해주어 값을 수정하려고 키를 누를때 updateKeyDown 함수가 실행되어 값이 수정되는것을 방지하였고, props로 받은 App.jsx에 state.list와 updateList함수를 사용하여 newList 배열을 새로만들고 그 배열안에 updateKeyDown 함수의 인자값으로 받은 k번째에 해당하는 댓글 내용의 content를 수정한 input 값이 담겨있을 state.value로 변경해줍니다.
그리고 state의 update를 다시 null로 바꾸어 updateList함수가 실행되어 화면이 다시 리렌더링될때 input이 아닌 span으로 보이도록 하였습니다.
마지막으로 updateList 함수에 변경된 content 내용이 들어있는 newList를 넣어 App.jsx에 state의 list가 새로 수정한 댓글 리스트로 변경되도록 해주었습니다.
테스트
content를 클릭하여 input 내용을 바꾸고 Enter 키를 누르면 수정한 값으로 다시 리렌더링 됩니다.
댓글 삭제하기
CommentList.jsx
deleteList 함수를 만들어 App.jsx에서 props로 받은 state.list와 updateList함수를 가져오고 newList를 만들어 list 배열에서 i 값과 k 값이 일치하는 리스트를 제외한 값들을 담아줍니다.
마지막으로 updateList 함수를 버튼을 누른 게시글을 제외한 newList를 넣어줍니다 이렇게 되면 삭제 버튼을 눌렀을때 삭제버튼을 누른 댓글을 제외한 다른 댓글들만 App.jsx에 있는 state의 list에 담기게 되고 화면이 리렌더링되어 삭제된 댓글은 없어지게 됩니다.
테스트
" 게시글 리스트 테스트 3 " 댓글 옆에있는 댓글 삭제 버튼을 눌러 해당 댓글을 삭제해보았습니다.
