React로 클론코딩을 진행한 후 , 코드 리뷰를 통해 더욱 퀄리티 높은 코드를 작성하도록 노력하자!
다음 프로젝트에서는 이부분 더 신경써서 코딩하기!!💪

구조분해할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

• before
  

1. 할당한 값이 변하는 값이 아니라면 항상 const를 사용하는 습관을 들이자.

2. 구조분해할당 문법을 사용해 좀더 깔끔한 코드를 만들자!

• after

미디어쿼리 위치

반응형 화면을 위한 미디어 쿼리는 해당 컴포넌트의 css에 위치시키는 것이 좋다!!

• scss의 nesting 기능을 최대한 활용하자
• 가독성 측면에서도 훨씬 좋다!

console.log 삭제..

test를 위한 콘솔들은 항상 삭제해주자... 부끄..😅

props의 활용

props는 readOnly 프로퍼티로써, 받아온 props를 직접적으로 수정하는 것은 좋지 않다!

• before
  

• 현재 newFeed라는 변수에 props로 받아온 feeds는 배열 형태로써, 값을 넣는게 아닌, reference (주소)를 저장하고 있다. 때문에 props로 받아온 feeds의 값을 넣은게 아니라 , 그 주소값을 저장하게 된 것이다!

• 또한 여기서도 할당한 값이 변한게 아니라, 배열내 객체를 변경시켜준 것이기 때문에 let이 아닌 const로 변경시켜주자!⚡️

• after
  

함수(로직)의 위치

각 기능들(함수들)의 위치는 해당 컴포넌트에 위치하는것이 좋다.

• 현재 댓글의 좋아요, 삭제 함수들이 Feed 컴포넌트 => Reply 컴포넌트에 위치

• 하지만 좋아요, 삭제를 발생시키는 하트,휴지통 아이콘은 Reply 컴포넌트에 위치

• 때문에 Feed 컴포넌트에서 좋아요/삭제 함수를 만들어 props로 넘겨주는 것이 아니라 Reply 컴포넌트에서 해당 함수들을 만들고 호출해 주는것이 좋다.

해당 컴포넌트에서 수정되는 함수들은 해당 컴포넌트에 위치시키자!

불필요한 fragment 사용 ❌

• 무조건 태그들을 감싸주려고 fragment태그 남발하지 말자
• 반드시 써줘야 하는게 아니라 전체를 감싸주는 태그가 있을 경우 사용하지 않아도 된다!

fetch 함수 사용법

• http://localhost:3000 는 생략이 가능하다. 포트번호가 달라진다면 오히려 일일히 수정해줘야 하기 때문에 유지보수 측면에서 오히려 마이너스다.

• fetch 함수에서 method:GET은 default값이다. 따라서 생략가능

• before
  

• after
  

정리💪

코드 리뷰때 언급된 코드들을 하나하나 리팩토링 해보니 너무 기능 구현에 급급하여 지저분해 보이는 코드들이 많이 보였다.
하나의 함수,로직을 구현하더라도 깔끔하고 좋은 코드를 구현하도록 노력해보쟈!⚡️