[항해 플러스 프론트엔드 3기] 3주차 회고록

3주차 과제
기본과제: pass😆
심화과제: pass😆

발제 목표

• react의 기본 hook을 직접 구현하면서 어떤 원리로 동작하는지 파악해보기
• 리팩토링 및 관심사 분리 해보기

3주차 계획

✅학습자료를 통해 Hooks가 탄생한 배경 이해하기
✅팀원 PR남겨보기

어려웠던 점

• 최상위 컴포넌트에서 state가 변경되면 하위 컴포넌트에서 모두 리렌더링이 일어난다.
  • 하위컴포넌트에서 React.memo를 사용하거나 최상위컴포넌트에서 context사용하는 컴포넌트를 분리하기
• useContext를 쓰려면 상위에 Context.provider가 감싸져있어야한다!
• Object.is()

배운점

• 프레임워크는 결국 문제를 해결하게 해주는 도구이고, 개발자에게 프레임워크보다 중요한 것은 문제해결 ⭐️⭐️
• 함수형 컴포넌트와 Hooks의 도입 과정
  • class 컴포넌트에서 함수형 컴포넌트로 변화한 과정
  • Hooks 등장 배경
    • 컴포넌트 간 상태 로직 재사용의 어려움
    • 복잡한 컴포넌트의 이해와 관리의 어려움
    • 클래스의 this 키워드로 인한 혼란
    • 생명주기 메서드의 비일관성
• Hooks의 장점
  • 함수형 컴포넌트에서 상태 관리 가능: 컴포넌트 로직이 더 작은 단위로 나뉘어 있어 이해하기 쉬움
  • 생명주기 메서드 대체: 복잡한 생명주기 메서드 없이 useEffect로 부수 효과를 관리
  • 로직의 재사용성 향상: 상태 로직을 다른 컴포넌트에서 재사용 X -> customHooks로 재사용가능
  • 관심사의 분리를 통한 코드 구조화: : UI렌더링과 부수적인 로직(데이터 패칭 등) 분리, 계산로직 분리 가능
• pnpm : 여러 프로젝트에서의 패키지 관리를 더 효율적으로 할 수 있게 도와주는 도구 npm , yarn과 유사하지만 공간절약 및 속도 우수
• 얕은 비교 vs 깊은 비교
• useMemo vs React.memo vs useCallback
  • https://velog.io/@k-svelte-master/react-hook-real-knowledge
  • useMemo로 useCallback 구현할 때, 함수 인자를 fn이 아닌 ()=>fn로 넘겨주는 이유
    • () => fn 같은 함수 래핑은 클로저를 활용하여 fn 대한 참조를 유지 fn로 넘겨주면 callback이 컴포넌트 내에 정의되어있을 경우, 컴포넌트가 렌더링될 때마다 fn 새로운 새로운 참조를 갖기 때문

회고

• 저번주차 과제보단 상대적으로 난이도가 높진 않았지만 React 함수형 컴포넌트와 Hooks를 제대로 써본적이 있어서 어렵긴했다
  • 학습자료를 통해 Hooks 탄생 배경부터 학습하고 개발을 시작하니까 이부분에서 hooks를 왜 사용하는지를 인지하면서 개발해서 더 이해가 많이되었다!
• 이번주차에는 성호코치님 멘토링을 청강했는데 이력서 관련 꿀팁을 많이들었다
  • 어서 이력서 업뎃을 해야겠다
• 팀원들이 vscode extension 공유를 해줬는데 생산성을 높여주고 귀여운 것들이 많아서 바로 설치해서 사용했다
• 이번주차에는 처음으로 다른 팀원들 PR을 남겨봤다!
  • 다른 팀원들 코드를 보는 것만으로도 성장이 많이 되는 것 같아서 꾸준히 남겨봐야겠다