처음에는 이전에 사용했던 댓글 삭제 기능을 이용해서 구현을 해보려고 했으나 실패했다...
클릭하면 comment_arr에 저장된 id와 하트 버튼을 클릭한 id가 서로 맞는지 조건을 주고 거기서 setState를 바꿔서 하트가 비었다 찼다 바꾸려고 했는데 잘 안됬다
최운정 멘토님이 접근은 좋았으나 그렇게 하면 너무 복잡하고 지금 map이 돌아가는 comment_arr state에서 그 밑의 요소들이 다같이 통제가 되기 때문에 그 하위 요소인 하트 아이콘이 id를 특정지어도 구분이 안되고 한꺼번에 작동한다고 하셨다.
이런 경우는 세분화를 시켜서 컴포넌트를 따로 떼주라고 하셨다.
나는 처음에 Main 이라는 큰 컴포넌트에서 댓글을 만들고 삭제하는 함수들과, state들을 한꺼번에 관리하고 이를 그 하위 컴포넌트 Feed 컴포넌트에 state, props로 쏴주었었는데 이렇게 하지말고
어차피 Main에서는 댓글을 관리하는 부분과 관련이 없으니까 관련 로직들을 Feed로 우선 옮겼다.
왜냐하면 어차피 Feed 컴포넌트에서 하는 기능들인데 굳이 상위 컴포넌트인 Main에서 만들고 또 props로 Feed로 쏴줄 필요가 없기 때문이다. 일을 두번하는 셈.
그냥 Feed 컴포넌트에서 만들고 거기서 state로 관리해버리면 되는게 그럴 필요가 없지
(그림으로 나중에 설명, 수정)
그리고 이 Feed 컴포넌트 안에 map으로 댓글들이 생성되는 부분을 Comment 컴포넌트라고 명명하고 따로 떼주었다.
Commnet 컴포넌트에는 생성되는 댓글들의 요소 한 묶음이 담긴다. (입력한 커멘트와, 하트 아이콘과, 기타 작동하는 버튼들)
Comment 컴포넌트로 이동해서 이제 여기다가 heart가 사라졌다 생겼다 하는 이벤트를 걸어주는데
이 부분은 그냥 heart 아이콘에 onClick 이벤트를 준 뒤, 상태에 따라 heart를 보여주고 사라지게 만드는 heart_on state를 만들어서 함수를 이용해 setState로 토글식으로 바꿔주고 이것의 true, false에 따라 heart 아이콘 img의 src가 교체되도록 바꿔버리면 된다.
map으로 매번 새 컴포넌트가 생성되므로 우리가 굳이 id로 특정지을 필요없이 자동으로 구분이 되는 원리이다.
느낀점
리액트를 하면서 어느 부분을 state에서 관리하고 어느 부분을 props로 넘겨줄지 고민이었는데
이벤트가 발생하는 위치를 잘 파악하면 이를 쉽게 구분할 수가 있었다.
만약 Main 컴포넌트에 의해서 Feed 컴포넌트의 상태가 바뀐다고 하면은 이런 경우는 굳이 수정하지 않아도 되었다. 이런 경우는 Main에서 짜고 props로 Feed로 쏴주는게 맞다.
하지만 Feed 컴포넌트에서 발생하는 이벤트인데 굳이 Main 컴포넌트에서 관리하고 그걸 또 props로 다시 쏴주는건 비효율적이다.
그리고 세부적으로 컨트롤 하고 싶을때는 과감하게 컴포넌트로 분리해서 독립적으로 작동하게 만드는게 신기했다.
재사용이 가능한 작은 구성단위라는 말 자체로 컴포넌트의 이 기능을 잘 활용하면 좀 더 쉽고 깔끔하게 로직을 짜는게 가능하겠다.
