- 댓글을 추가하고 삭제 Button을 눌렀을 때 해당 댓글 삭제
- 좋아요 Button을 눌렀을 때 해당 댓글 좋아요 표시
(한번 더 누르면 좋아요 취소)
중요하다고 생각한 점
- 컴포넌트화
유지보수와 가독성을 생각해서 필요한 부분을 컴포넌트화하고 반복되는 부분을 map매서드를 사용해서 코드를 간결하게 했다. - 스프레드 연산자
기존 데이터에 추가하려는 데이터를 더해서 기존 데이터에 덮는 방식이 아닌 스프레드 연산자를 통해서 기존 데이터를 포함해서 다음 데이터를 추가합니다. - useState 선언 위치
컴포넌트를 통해서 상위 컴포넌트와 하위 컴포넌트에서 기능에 맞춰서 useState를 알맞는 위치에 선언합니다.
댓글 추가, 삭제 및 좋아요
- 댓글 추가
const onChangeContentInput = e => {
setComment({
content: e.target.value,
});
preventEmptyContent = e.target.value;
};해당 input태그의 value인 e.target.value를 useState로 관리합니다.
const onClickCommentAdd = () => {
if (preventEmptyContent !== '') {
let key = Math.random();
setCommentList([...commentList, { ...comment, key }]);
}
};button을 눌렀을 때 스프레드 연산자를 사용해서 기존 데이터의 comment 데이터를 추가해서 map 매서드를 사용했을 때 입력값(내가 작성한 댓글)만 다른 같은 ui가 추가로 그려지면서 댓글(기존 데이터+추가 데이터)이 렌더링됩니다.
useState는 상태관리, 리렌더링 할 때 사용하는데 button클릭 시 리렌더링이면 1개의 useState로 관리 할 수 있지않을까?? -메모-
스프레드연산자를 사용해서 데이터를 직접 변경하지 않고 새로운 데이터를 생성해서 데이터를 업데이트 방식으로 데이터의 불변성을 유지했습니다.(PUSH, POP매서드 또는 let const = 1; => count = 2;, count += 1 등 직접 변경시키면 데이터의 불변성이 깨지게 됩니다.)
*데이터 불변성 장점
1. 예측이 가능해서 디버깅과 유지보수에 장점이 있다.
2. 성능 최적화의 장점이 있다.
3. 복잡성을 감소시켜서 데이터 상태 추적에 장점이 있다.
4. 리액트에서 상태관리할 때 데이터 변경 여부를 효과적으로 감지한다.
중요한거 같은데 아직 크게 와 닿지가 않네...
- 삭제 및 좋아요
{commentList.map(item => (
<Comment key={item.key} check={item.key} />
<button className="delete-button" onClick={() => onClickCommentDelete(check)}>
삭제
</button>
const onClickCommentDelete = e => {
setCommentList([...commentList.filter(item => item.key !== e)]);
};map매서드를 사용해서 요소를 생성할 때 식별하기 위해 key가 필요하다.
해당 댓글을 타겟하기 위해서 key값을 이용했다.(Comment컴포넌트의 key = item.key = check = e)
그리고 filter매서드를 사용해서 해당 댓글을 제외한 댓글들을 생성해서 리렌더링했다.
느낀점
컴포넌트화, 함수화, 모듈화 등 만들고 필요할 때 불러서 사용해야 가독성과 유지보수에 좋다. 처음 코드를 작성할 때는 잘 지켜지는데 에러가 발생하고 디버깅을하면 자꾸 꼬리 물기식으로 코드가 작성돼서 점점 의도했던 방향과 달라진다. 이러한 경험을 하면서 왜 멘토님과 다른 개발자 블로그에서 남의 코드를 많이 보고 코드를 많이 쳐야 한다고 이야기를 했는지 조금씩 알게 됐다. 한번 사용했던 것들은 경험이 있어 주의하려고 노력하는데 모르는 개념과 사용하지 않은 방법들을 할 때는 동작시키고 에러를 고치는 데 우선순위를 줘서 잘 안 지켜졌던 것 같다. 이를 해결하려면 다른 사람들 말처럼 많이 보고 많이 쳐보는 수밖에 없는 것 같다. 이만 코드 치러 가봐야겠다.
