- 위스타그램 메인 댓글 부분을 컴포넌트로 쪼개자!
- 부모에서
map으로 자식 컴포넌트에서props로 전달!
어려움이 있었지만 나만의 블로그로 정리를 다시 해봐야겠다.
✏️ 댓글 추가
✂️ 댓글 삭제
나는 메인페이지에서 컴포넌트를 각각
4개의 컴포넌트로 쪼개 부샀다
CommentList안에는 댓글 컴포넌트로 분리 해봤는데
댓글관련 기능은 부모 컴포넌트 즉, Main페이지에서Map으로 전달 해서 자식 컴포넌트CommentList.js에서props로 받으면 관리가 가능하다!
map 함수는 반복되는 컴포넌트를 렌더링 되기 위해 사용한다.
🧑🏻💻 My Code
댓글 추가 !
✅ 첫번째 구현
댓글을
form으로 묶어서form태그에onsubmit을 날렸고,
input댓글창에서는onChange로inputComment라는 함수를 선언 했다.
댓글의 값을 알고 댓글의 값이 들어갈 때 조건문으로 실행이 되어야 하기 때문에 value값을 넣어줬다. 화살표 함수를 이벤트를 하나 받고
setState에다가 담어서 댓글에 이벤트타겟으로 value값을 comment 댓글에 담아줬다!
여기까지 댓글의 입력값을 받았다면 이제는 댓글을 보내줘야하겠지?
onSubmit()함수를 호출 했다 밑에서 한 번 보자
⛄️ form에 onSubmit() 이벤트 발생 !
preventDefault(): 이벤트를 취소 한다면, 이벤트의 전파를 막지않고 그 이벤트를 취소
concat(): 선언한 위에 선언한 obj변수를 통해 붙혀주는..? 합친다~?
uuid(): 고유한 id 라이브러리 -npm install해서 가져 왔다 !
- 이벤트로 디폴트값을 지정해줘야한다
- 여기서
uuid()는 라이브러리 인데 아이디 값을 고유한 아이디를 사용 할 수 있는 라이브러리 이다. 찬호님한테 배워왔다 ㅎㅁㅎ
좋아요는 아직 구현하지 못했다.. 구현중이다 ! !
내가 필요한 값은 총 : 3가지 (고유한 id,name,입력될 내용 text)
id가 중복되면 안된다!! 만약 중복되면 삭제 했을때 같은 아이디가 삭제 되기 때문!
여기까지 댓글 추가 기능을 구현했다. 멘토님과 동기님들에게 리팩토링 받은 것을
조금 더 수정해서 push를 해야겠다!!! 항상 쓰는 코드보다는 읽히는 코드가 많기 때문에 가독성은 좋을 수록 개발에 있어서 소통도 더 잘되고 보기 쉬워진다 📝
댓글 삭제
먼저 댓글 자식컴포넌트로 보내줘야 하기 때문에 map으로 뿌려주자 라고 생각하자
- 맵 안에서는 key값은 매개변수로 무조건 받아줘야 한다?????
받지 않으면 key에러가 나온다... 공식문서 자료에서 가져왔다 !
자세한건 링크를 --->>> React key를 주는 이유
핸들이벤트 댓글삭제 함수를 사용 해서 set으로 업뎃 해줬다
filter() 메소드는 말 그대로 필터 해준다 라고 생각하면 된다
comment가 고유한 id값과 같지 않을 경우에 delete이벤트 실행되게 조건문을 담았다
계속 강조했다!!! id는 고유한 값이 있어야 하기 때문에 🔐
댓글 컴포넌트
위처럼CommentList댓글 컴포넌트를 쪼갠 곳에서 댓글을 관리를 했다.
컴포넌트란 재사용 가능한UI구성단위 이기 때문에 나눠주면 유지보수에도 좋고
재사용도 가능하다!!
댓글을 추가 삭제 하는 것을 구현 했다.
- 부모 컴포넌트에서
map으로 뿌려진것을props로 자식 컴포넌트에서 받아 쓸 수 있다는 것이다!- 두번째로 받은 댓글 리스트 중에서 li부터만 빼 왔다
- 모든것에
state를 받을 필요 없이 비구조 할당으로 한 번 선언하고
가능하면 가독성 좋은 코드로 바꿔 줄 필요가 있다!RiDeleteBin2Line은React라이브러리 아이콘 자체를 컴포넌트화 시킨 것이다. 밑에 링크에서 install해서 사용하세용 : )
끝 !
