Westagram 댓글 추가 / 삭제 기능 구현

팀프로젝트로 진행 중인 Westagram 프로젝트에 댓글달기 기능을 구현하였다. 해당 과제를 진행하며,

• React에서 데이터가 전달되고 props로 받는 과정
• 이벤트 구현
• .map함수를 활용하여 list 추가 및 list별 key값 부여

등을 익힐 수 있었다. 쉽지 않은 댓글 추가 기능 구현이었지만, React에 조금은 더 익숙해지는 학습이었기에 기록해둔다. 기능을 구현하는데 해당 페이지를 참고하였다.

1️⃣ 댓글기능구현 기본원리

• 댓글입력은 크게 내용 입력 / 내용 전달의 2가지 동작으로 이루어진다.
  따라서 각각의 동작에 따른 데이터 프로세스를 정의해주어야 하는것이 기능구현의 핵심이다.

코드를 살펴보면,

• state의 value값은 댓글 입력 내용을 담는다. 이것은 makeComment라는 함수에 따라 onChange 이벤트로 동작하여, input창에서 입력되는 댓글이 value의 값으로 전달된다.
• state의 comments는 초기에는 빈 배열이지만 입력한 댓글(value)을 submit하는 순간 배열로 저장된다. if함수를 설정하여 value값이 없을 경우(댓글 내용을 입력하지 않은 경우) 입력요청 메세지를 주었고, 내용이 있을 경우 value값이 배열로 저장될 수 있도록 설정하였다. 배열에 저장되는 명령은 concat함수를 사용하였다.
• 마지막 value값을 공란으로 설정한 것은 value값이 배열에 저장되면 다음 댓글 입력 값을 받을 수 있도록 value에 아무 값이 없도록 하고, onClick이벤트 동작 시 댓글 입력창의 입력 내용도 사라지게 하기 위함이다. 이 모든 동작은 addComment함수에 따라 onClick 이벤트를 통해 이루어진다.
  
  

2️⃣ 댓글입력 이벤트설정

댓글을 구현하는 요소들을 별도의 컴포넌트로 구성하지 않고, 부모 페이지에서 값을 그대로 받고 이벤트도 이루어지도록 입력하였다.

• 댓글 입력창(input태그)에 onChange 이벤트 값을 주어 댓글 입력 시마다 value에 입력한 내용이 들어갈 수 있도록 하였다. 여기서 중요한 점은 value값을 state.value값으로 지정해주어, onClick 이벤트 시 input칸의 내용이 사라질 수 있도록 해야한다. (value 값을 지정해주지 않아 input칸에 내용이 사라지지 않아 몇시간 동안 헤맸다😓)
• button 태그에 onClick 이벤트 값을 주어 버튼을 클릭할때마다 value 값이 comment 배열에 저장될 수 있도록 하였다.
  
  

3️⃣ 댓글 추가 기능

• 입력된 댓글이 실제로 피드에 구현되는 것은 별도의 컴포넌트(InputReply)를 구성하여 구현될 수 있도록 하였다.
• 부모의 state에 저장된 댓글 데이터에 map 메소드를 적용하여 댓글의 개수만큼 댓글 컴포넌트가 나타나게 구현하였다.
• map 함수는 동적으로 구현되는 데이터 하나하나를 구현하는데 필수적인 함수로 React에서 빠질수 없는 메소드라고 생각한다.
• map 함수 사용 시 추가되는 컴포넌트 마다 key값이 필수인데, 이것은 React의 중요한 특성 중 하나로, 별도 벨로그 페이지를 작성할 예정이다.

4️⃣ 댓글 삭제 기능

• 댓글 삭제 함수는 댓글이 저장되는 'commentList' state값에 filter함수를 적용한다.
• filter함수는 'commentList'에 저장되어있는(이미 추가된) 댓글들의 id 값과 댓글 삭제 함수의 인자로 받는 id값과 동일여부를 비교하여, id값이 같은 댓글은 삭제한 새로운 'commentList' 배열을 반환한다. (댓글이 삭제된 새로운 배열이 댓글 목록으로 생성되는 것이다.)
• 댓글 삭제 함수의 인자인 id는 commentList에 저장된 댓글(comment)의 id값을 props로 받고, 댓글 삭제 함수는 onClick이벤트를 가지는 component에 props 함수로 받아 실행된다.

지금까지 완성된 댓글구현은 ID는 고정값에다가 좋아요, 삭제 기능이 결여되어 추가해야할 것이 아직 많다.(아직 멀었다!) 간단한 댓글 기능 구현하는 과정만으로도 React의 기능들을 익힐 수 있었고, HTML, CSS, JS에 비해 낯설게 느껴졌던 React에 조금은 익숙해질 수 있었다. 좀 더 React에 사무쳐야 겠다.😶‍🌫️ 👉 8/26 댓글 삭제기능 구현하여 내용 추가. React의 기본을 탄탄히하자! 아직 아리송한 부분이 너무 많다.