[11팀 민성윤] Chapter 1-3 React, Beyond the Basics

[SeongYoonMin]

과제 체크포인트

배포 링크

1-3과제링크

기본과제

• shallowEquals 구현 완료
• deepEquals 구현 완료
• memo 구현 완료
• deepMemo 구현 완료
• useRef 구현 완료
• useMemo 구현 완료
• useDeepMemo 구현 완료
• useCallback 구현 완료

심화 과제

• 기본과제에서 작성한 hook을 이용하여 렌더링 최적화를 진행하였다.
• Context 코드를 개선하여 렌더링을 최소화하였다.

과제 셀프회고

기술적 성장

• 메모이제이션에 대해 좀 막연한 마음으로 이번 과제에 임하였는데, 발제과제노트에서 왜 메모이제이션을 해야하는지, 하면 어떤장점이 있는지 어렴풋이나마 느낄 수 있었고, 얕은비교와 깊은비교를 이용해 어떤식으로 값을 비교하고 저장하고 리렌더링할지 결정하는지 알게되었습니다.

코드 품질

• memo나 useCallback을 구현하면서 제가 구현한 얕은비교와 깊은비교의 문제점(테스트에서 찾지 못한)을 알게되어 수정하는데 많은 어려움을 겪었지만...(애초에 얕은비교와 깊은비교 개념자체를 잘못알고있었기때문에 생긴 이슈) 수정하는데 성공하였고, 여러 팀원들의 코드를 참고하면서 Array.every(callback)에 대해서 알게되어 해당방식으로 응용해 풀어나간점이 매우 만족스러웠습니다.
• login / logoff시 의존성에 의한 문제점에 대해 고민하게되엇고, 풀어나가게됨에 따라 너무 만족스러웠습니다.

학습 효과 분석

• 얕은비교와 깊은비교에 대해 알게된가 가장 크고 만족스러웠던 부분 같습니다. 사실 처음에는 얕은비교? 얕은복사인가? 하면서 처리하였는데 뭔가..뭔가 조금은 다르더군요... 아직도 똑바로 이해한건 아니지만서도 팀원들에게 조언을 구하고 여러 문서들을 찾아보면서 어렴풋이나마 알 게 되어 너무 좋았습니다.

과제 피드백

리뷰 받고 싶은 내용

• 제가 혼자서 프론트엔드작업을 하고 주로 맡는부분이 회사내에서의 백오피스(사용인원도 매우적은) 이다보니 최적화?같은부분에 대해서 좀 막연하고 꼭 해야하나? 라는 생각이 있었고, 실제로도 많이 사용해본적이 없습니다.. 애매모호한 피드백요청일 수 있는데 혹시 어느정도 규모에서부터 메모이제이션을 안함으로써 생기는 이슈가 발생하는지 코치님의 의견을 듣고싶습니다. 그로인해 메모이제이션의 중요성도 같이 깨닫고싶습니다.

[dosilv]

성윤님! 막히는 부분 질문도 적극적으로 하시구 다른 분들 PR도 열심히 보시는 모습이 너무 보기좋네요👏🏻👏🏻
각 주석에 날짜랑 고민하신 내용들이 적혀있는 걸 보고(물론 실제 프로덕트가 아니니까..!) 나중에 다시 봐도 기억이 잘 떠오를 듯해서 좋은 방법이라고 생각했어용ㅎㅎ
deepEquals 함수 쪽에서 하나 코멘트 달고 싶은 건, 배열도 자바스크립트에서 결국 객체에 해당하니까 isSameArray, isSameObject를 나눌 필요 없이 isSameObject로 통일하면 좋을 것 같아요! Object.keys에 배열을 넘기면 인덱스 배열을 반환해서 결국 objA[key]로 꺼냈을 때 value를 비교하는 동일한 결과를 얻을 수 있답니당
그리구 최적화에 대해 남기신 질문에 개인적인 의견을 말씀드리면, 저는 필요한 곳에만 사용하자는 입장이에요. 말씀하신 것처럼 꼭 해야 하나? 라는 생각이 드는 부분까지 무분별하게 메모이제이션을 적용하면 코드 가독성도 떨어지고 메모리 사용 측면에서도 비용이 있기 때문에 하지 않는 편이에요. 예를 들어서 ItemList의 totalPrice나 averagePrice 같은 경우 무거운 연산이 아니고, 다른 하위 컴포넌트에 주입하는 값도 아니기 때문에 useMemo를 적용하지 않아도 무방해 보여요! 그치만 필요하다는 것도 결국 주관적이기 때문에 적용할 거면 다 적용하고, 아니면 아예 하지 않는다는 의견도 있어서 여러 가지 테스트를 해보시면서 성윤님만의 결론을 가져가시면 좋을 것 같아요ㅎㅎ
고민하면서 과제하시느라 너무 수고 많으셨구 이번주도 파이팅입니다~~~!~! 💪🏻⭐️