[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기 12주차 4LS 회고 (useEffect, useMemo, Context, customHook)

 ❤️‍🔥 Liked

• 이번주 수업에서 git 심화과정이 있어서 좋았다. 범재강사님이 일부러 팀끼리 PR, Merge 과정에서 에러가 나는 상황을 만들었고, History가 꼬이는 화면을 보여주시면서 해결하는 걸 보니 확실히 도움이 됐다.
  실제 현업에서 남기는 커밋 메시지와 기록을 보는 것도 큰 동기부여가 되었다.
• React 마지막 파트에서 customHook을 배우면서 무한 스크롤을 구현했는데 꿀잼!
  왜 재밌어지자마자 끝나버리니 리액트... 과정이 너무 짧아요... 계속 배우고 싶어요...
• promise, fetch 계속해도 이해가 안 가고 어렵더니 그냥 통째로 외워버리니 편-안.
  API를 가져오는 구조에 대해서는 충분히 이해했다는 생각이 들어서 스니펫으로 만들어버렸다.
  주말에 공공 API 가져와서 실습해 봐야겠다. (이해했다는 말 곧 정정될 수 있음 주의...😕)

 
 

 💣 Lacked

• React 학습이 끝나서 곧 프로젝트에 들어가는데 상태관리 정도만 하는 정도라 어떻게 React 프로젝트를 당장 착수해야 할지 막막하다. 새로운 강의를 듣기보다는 기존에 실습했던 자료를 React로 변경해 보라는 조언을 받아서 실행해 볼 예정이다.
• 멘토님에게 우연히 걱정을 털어놓게 되었는데 내가 무엇을 모르는지도 모르는 무지한 상태 UU(Unknown-Unknowns)에서 나의 부족함과 필요를 인식하는 KU(Known-Unknowns)상태가 되어야 한다는 조언을 받았다. 내가 무엇을 모르는지, 어떤 지식이 필요한지 파악하는 것과 구체적인 질문을 하는 것이 중요하고 질문을 작성하는 그 과정 제체에서 답을 찾기도 한다는 것이다.
  혼자서 해결하는 방식이 익숙해서 도움을 요청하기가 어렵다고만 생각했는데 질문 역시 훈련이고 혼자서만 해결하는 방식이 협업에 있어서 좋지 않은 결과를 가져올 수 있다는 현실적인 조언에 깊이 반성했다. 덕분에 앞으로의 학습 방향도 수정할 수 있었다. 🙂

 

known-unknown Matrix

 

 

 

 ✏️ Learned

• useEffect는 state를 지정하여 해당 스테이트가 변경되었음을 감지하면 함수를 실행한다.
• useRef를 사용하여 useRef가 접근한 태그 요소의 값을 바꿀 때는 리렌더링을 발생시키지 않기 때문에
  리렌더링 하지 않고 state와 상관없이 component의 DOM을 제어하고 싶을 때 useRef를 사용.
• React에 가장 큰 장점인 재사용성을 생각한다면 useRef사용을 권장하지 않음.
• useMemo는 컴포넌트 성능 최적화에 사용되며 memoization이라는 기법을 사용한다.
• fetch API를 통해 서버통신할 때는 꼭 예외처리를 해줄 것.
• fetch()를 통해 api를 호출할 때 상태변경에 따라 리렌더링이 발생할 수 있으므로 useEffect Hook을 사용할 것.
• await는 함수 앞에!! 변수명 앞에 하는 거 아니다...!
• api url에 ? 조건=답 형식으로 질의 가능.
• context는 컴포넌트 계층 구조에서 하위로 객체를 전달. Consumer로 구독, Provider에서 전달
• useContext는 구조분해할당으로 context를 간단하게 실행하는 hook
• 시니어와 주니어의 차이는 얼마나 많은 방탄코드가 있느냐의 차이이기도. 예외처리 중요하게 생각할 것.
• Clean-up 함수는 Update, Unmount될 때 실행.
• Lazy initialize는 useState를 사용하여 state를 초기화하는 과정을 lazy(게으르게)하게 실행하는 것.
• JS에서는 중복된 로직을 Function으로 처리하지만 리액트에서는 Custom Hook을 만들어서 분리하고 재사용을 높인다.

 
 
 

 👩🏻‍💻 Longed For

• 10km 러닝, 수영 (내 체력...어디갔냐)
• 헷갈리고 어려운 문제는 멘토님이나 강사님께 도움 요청.
• 모던 JavaScript 튜토리얼, 파트 2 이벤트 단락 숙지.
• 회고조 React 공식문서 스터디 참여.
• 프로그래머스 0단계 문제 매일 2개씩 풀기.
• 세렝게티 mbti 강의 산출물 React SPA로 만들어보기.