React 코드피드백

React 공부 화이팅입니다! 저는 두 가지가 눈에 띄었는데요. 1) 시멘틱 태그 사용하기 https://github.com/KimSoungMin1/shinhan/blob/master/shinhan/src/components/Header/Header.jsx <- 헤더 컴포넌트를 보면 클래스네임으로 header를 표현하고 있는데, 태그 자체를 header로 같이 바꿔주는 것도 코드리딩, SEO관점에서 좋을 것 같습니다. 2. 컴포넌트 분리 https://github.com/KimSoungMin1/shinhan/blob/master/shinhan/src/components/Header/HeadBottomComp.jsx <- HeadBottomComp안에서 Top 컴포넌트를 정의하고 있는데, Top 컴포넌트는 같은 파일내 별도 컴포넌트로 분리 또는 다른 파일로 분리하는게 좋을 것 같습니다. 작성해주신 구조에서는 Top 컴포넌트에 변경사항이 없음에도 HeadBottomComp가 렌더링 될 때 마다 Top 함수를 생성하고 렌더링하게 되어있습니다. 추가적으로 프로젝트가 발전할 수 있는 요소(?) 몇 가지만 말씀드리면. 1. js -> ts로 변경하기 요즘 많은 회사에서 React를 ts로 개발하고 있습니다. typescript를 공부하셔서 프로젝트에 적용하면 어떨까요? 2. react 18에 대해 공부하기 프로젝트에 react 18버전을 사용한 만큼, 18버전은 17버전과 어떤점이 다른지 알아두면 앞으로 기능을 추가할 때 더 도움이 되고 면접 질문에도 답할 수 있을 것 같습니다.

다른분들이 너무 잘 답변을 달아주셔서 저도 하나만 첨언하자면 가독성을 위해 구조 분해 할당을 이용하면 좋을거 같아요 const count = data.state.count; const setCount = data.action.setCount; const likes = data.state.dropList.list; const drop = data.state.drop; const setDrop = data.action.setDrop 이 5줄의 코드가 const { count,, likes, drop } = data.state; const {setCount, setDrop } = data.action; 이렇게 2줄로 변경됩니다. 한 줄로도 가능한데 한번 찾아보시면 좋을것같아요! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

안녕하세요! 잠깐 깃허브를 살펴봤는데요. 빠르게 집고 넘어가겠습니다. 1. 코드를 일관성있게 짜시면 좋을것 같습니다. 예를 들면, 들여 쓰기는 통일해서 스페이스바 2번 또는 4번 또는 탭 1번으로 일관성있게 작성하는게 좋아요. (쓰고계신 IDE 프로그램에서 설정을 하실 수 있습니다) 2. 할당문 사용하실 때 제발 띄어쓰기 해주세요 ㅠㅠㅠㅠㅠ 3. JS에서 비교연산자는 == 말고 ===를 사용하는게 일반적으로 좋습니다. (참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness) 4. Login.jsx의 div 중첩은 개선할 수 있을 것 같아요 5. 조건문이 복잡해진다면 변수로 미리 할당해서 명시적으로 코드를 작성하시면 좋습니다 ex) ------ 기존: if (count >= 0 && count < 2 && likes.find((like) => like.id == post.id) == undefined) 변경: const isValidCardToLike = count >= 0 && count < 2 && likes.find((like) => like.id == post.id) == undefined if (isValidCardToLike) ... ----- (변수명은 의미에 맞게 적으시면 될듯합니다. isValidCardToLike, isLikableCard 등등) 6. DataContext에 state이랑 setter (action)을 같이 넣는 방법은 신박하긴하네요. Card 관련해서 뭔가 추가 될 때마다 DataContext에 state + setter를 같이 추가해줘야될 것 같아서 장기적으로 볼때 좋은 구조인지는 잘 모르겠네요. 7. 리액트에는 hook 이라는 개념이 있습니다. 같이 공부해보시면 좋을것 같아요 (참고: https://ko.reactjs.org/docs/hooks-custom.html) 8. 깃허브 찾아보시면 오픈소스로 공개된 리액트 코드들이 많으니 리액트에 어느정도 익숙해지시면 한번 참고해보시는 것도 좋습니다. - https://github.com/daangn/mbti.daangn.com/tree/main/src - https://github.com/clintonwoo/hackernews-react-graphql/tree/master/src - https://github.com/devhubapp/devhub/tree/master/packages 개발자는 1인 개발자가 아닌 이상 다른 개발자와 함께 코드 작업을 해야합니다. 다른 개발자 보기에 좋은 코드인지 항상 생각하시면서 공부하시면 좋을 것 같아요. 응원합니다 :)