React - Hooks를 사용하여 댓글 구현하기

전역 상태 만들기

createContext 메서드를 사용하여 Store 라는 context 객체를 생성하고 초기값도 위와같이 설정하고 export 해주었습니다.

1. 최상위 컴포넌트에 useReducer 메서드로 가져온 초기값에 해당하는 state를 만들고 state를 바꿀때 사용할 dispatch 메서드를 선언합니다. dispatch 메서드로 상태를 바꾸려고 할때 reducer 함수가 실행되어 상태를 바꿔줄것입니다.
2. defaultValue를 useMemo 메서드를 사용하여 state가 변할때만 state와 dispatch를 리렌더링하여 성능을 최적화 해주었습니다.
3. Store.provider를 사용하여 defaultValue값을 하위컴포넌트에게 전달해주었습니다.

댓글 추가하기

CommentForm.jsx

reducer.jsx

1. 우선 content라는 상태를 만들고 onChange 이벤트에 handleChange 함수를 사용하여 input에 값을 입력할때마다 content에 값이 업데이트 될 수 있도록 해주었습니다.
2. handleSubmit 함수를 만들어 onSubmit 이벤트가 발동될 때 dispatch를 통해 reducer 함수를 실행시키는데 type을 CREATE_COMMENT로 설정해주었습니다.
   reducer 함수에서 두번째 인자값인 action으로 받은 type과 payload를 사용해야합니다.
3. switch 문을 통해 CREATE_COMMENT type일때에는 기존 초기값 commentItem 값에 action으로 온 payload 값을 추가하여 commentItem의 값을 추가해준 상태를 리턴합니다.

댓글 추가 테스트

댓글을 추가하기 전에는 state의 commentItem이 초기값인 빈배열 상태로 된것을 확인할 수 있습니다.

댓글을 작성하면 commentItem 배열안에 값이 추가된것을 확인할 수 있습니다.

댓글 보기

CommentList.jsx

1. useContext 메서드를 사용하여 Store의 provider로 전달받은 데이터를 가져옵니다.
2. commentItem을 반복문을 사용하여 commentItem 배열안에 갯수만큼 댓글 리스트를 만들어주었습니다.

댓글 보기 테스트

상태의 commentItem 배열 안에 있는 갯수만큼 댓글리스트가 보입니다.

댓글 수정하기

commentList.jsx

1. input 상태를 만들어 null을 기본값으로 지정하고 li를 클릭하면 handleClick 함수가 실행되어 해당 k 값으로 input의 상태가 변경되도록 설정해주고 조건부 렌더링을 사용하여 input에 k 값이 있을때에는 input으로 렌더하고 없을때에는 content 내용만 보이도록 설정해주었습니다.
2. onkeyDown 이벤트에 handleKeyDown 함수를 넣어 Input에서 Enter 키를 눌렀을때 input을 null로 바꿔 다시 li로 보이게끔 해주었고 dispathch 메서드를 사용하여 UPDATE_COMMENT 타입으로 설정하고 payload에 index는 k값인 상태 input의 값을 넣어주었고 content는 input의 수정한 내용을 넣어주어 reducer 함수를 실행시켜주었습니다.

reducer.jsx

1. dispatch 메서드에게 action으로 받은 type과 payload를 통해 case가 UPDATE_COMMENT일때 payload에서 받은 index와 content를 가지고 기존 commentItem에서 index에 위치한 객체의 content 값을 payload로 받아온 content로 바꿔준 상태를 리턴해줍니다.

댓글 수정 테스트

• 댓글 수정 전

commentItem의 content값이 아직 수정되기 전인것을 확인할 수 있습니다.

• 댓글 수정 후

댓글을 수정하고 나면 commentItem의 content가 수정한 입력값으로 바뀐것을 확인할 수 있습니다.

댓글 삭제하기

CommentList.jsx

1. 댓글을 삭제하기위해 button을 하나 만들고 onClick 이벤트를 걸고 안에 handleDelete 함수를 넣어 X 버튼을 클릭할 경우 해당 index값인 k가 payload의 index에 담기고 dispatch를 통해 reducer함수가 실행될 것 입니다.

reducer.jsx

1. dispatch의 인자값을 action으로 받았으니 type이 DELETE_COMMENT일 경우에 filter를 사용하여 기존의 commentItem에 index와 payload로 받은 index가 일치하는 것을 제외한 값을 commentItem에 담아 return해줍니다.

댓글 삭제 테스트

• 댓글 삭제하기 전

• 댓글 삭제한 후

X 버튼을 누르면 해당 댓글이 삭제되는것을 확인할 수 있습니다.