[리액트 숙련주차] 개인과제 리뷰 - 최원장 튜터

[wonee09]

아래 리뷰는 redux 브랜치를 기준으로 작성되었습니다.

불필요 주석 삭제

배포버전에서는 불필요한 주석을 제거해서 최대한 깔끔한 형태로 합니다.

간결한, 독립적인 상수화

상당히 좋은 습관입니다. 변하지 않는 코드 부분에 대해서 독립적으로 관리하고 계시네요. 이렇게 하면 휴먼에러를 원천적으로 차단할 수 있어요.

응용력

createStore는 rtk가 대세가 되면서 더이상 관리되고 있지는 않지만, 오늘 하신 것 처럼 api를 뜯어보고 기능을 확인하여 활용하는 부분은 정말 좋은 프랙티스인 것 같습니다!! :) preloadedState를 활용하신 분은 첨 봤네요!!

응용력2

기존 팬레터 정보 이외에도 모달 정보까지 redux로 관리하셨네요. 이 부분도 상당히 마음에 듭니다!! :) 다만, 해당 모달 관련 정보가 fanletter module에 들어있어야 하는지는 한번 생각해볼 필요가 있을 것 같아요. 동일한 state로 묶이기 때문에 데이터의 특징이 좀 섞이는 느낌이랄까...!?! 하하...

간결하고 명확한 payload

payload가 꼭 필요한 것에만 들어가있어요. 단순 복-붙해서 진행한게 아니라, process를 정확히 이해하고 작성했다는 느낌이 많이 듭니다.

uuid

uuid는 유니크한 키를 생성하는 데에 필수적인 요소라고 할 수 있지만, 페이지 이동 시에는 새롭게 생성할 여지가 있어서 다른 패키지도 함께 고민해주시는 것이 좋아요.

튼튼한 자바스크립트

객체와 배열의 api를 유연하게 활용하는 능력은 기초체력과 같아요. 새로운 기술을 습득할 때, 논리적인 코드를 작성할 때 꼭 필요한 부분이죠. 희라님은 이런 부분이 잘 준비돼있는 것 같아요 :)

lifting state up의 올바른 이해

처음엔, handleMemberClick을 왜 굳이 props로 내려줬나 생각했는데, 여러 하위 컴포넌트에서 쓰기 위해서 상위컴포넌트인 Main에서 해당 내용을 작성하고 있다는 걸 알게됐네요. 리액트는 단방향 state 전달을 지향하기 때문에 전역상태 + Lifting state up 등을 온전히 이해하고 있어야만 제대로 원하는 데이터를 원활하게 전달할 수 있습니다. 손댈게 거의 없는데용?? ㅎㅎ 너무 잘하셨어요!

모달에 대한 핸들링

위처럼 모달에 대한 핸들링은 두 가지가 늘 함께 가나요? 그렇다면은 dispatch 두 개 하는 부분을 하나로 합칠 수 있을 것 같은데 어떠신가요?

뻔하지 않은 hook 사용

useRef도 쉬운 내용이지만, 활용 안해보면 어렵죠. 굳!

공통컴포넌트 화

svg 등은 보통 공통 컴포넌트로 만들어서 다른 부분에도 활용될 수 있도록 하는 것이 일반적입니당

예상치 못한 접근에 대한 처리

만일 user가 주소창에 직접 detail/asdfasdf 이렇게 작성한다면 어떻게 될까요? 예상치 못한 params에 대한 처리도 있으면 좋을 것 같습니다.