WIL 4

이번 주 한 것

1. React redux-chunk (미들웨어)를 이용하여 파이어베이스(서버리스)랑 연결 후 CRUD (CR까지 구현)
   
   
2. 지난 주에 하던 프로젝트를 기능 구현 위주로( 시간 날 때 CSS 부분을 추가할 것 ) 마무리 했고 심화 주차 개인 과제 하고 있다.

배운 것

1. React thunk ( 미들웨어 )
   
   
2. 서버와 어떻게 통신하고 데이터를 주고받는지에 대한 전체 맥락 ( + 비동기에 대해 )
   
   
3. React 각종 문법 및 자바스크립트에서 기초적인 것들에 대한 디테일한 의미 파악

🤦‍♂️ 회고

• 이번 주를 보내면서 어떤 느낌이 들었을까에 대해 고민하는데, 가장 먼저 스쳐 지나간 생각은 ' 어? 페이스를 찾은 것 같은데? '라는 생각이다.
  
  total 4주, 매주마다 집중력은 높낮이가 있었다.
  
  그 높낮이를 어떻게 하면 격차를 줄이고 높은 상태로만 유지할 수 있을까에 대한 고민을 항상 가지고 있었고 그에 따른 소소한 테스트들이 매일 있었다.
  
  그렇게 매주를 보내고 있었는데, 이번 주는 지난 주차들과 달리 집중력의 높낮이가 줄어들고 그것이 순탄하게 순항하기 시작한 것 같다라는 느낌이 든다.
  
  몰입을 계속 경험하다 보니 몰입의 습관이 굳은살 베긴 걸까?
  
  아직 정확한 이유에 대해 파악은 못 했지만, 하나 가장 높은 확률로 확신에 가까운 건 '아날로그 일기 + 책 읽기' 가 항해 이전의 내 삶에도 그랬듯이 지금에게 또한 아주 큰 영향을 준다는 것이다.
  
  그치만 영향에 대한 확신 덕에 또다시 그 아이러니함에 빠진다.
  
  아무것도 아는 게 없는 상태에서 시작한 터라 해야 할 건 남들보다 더 많고 과제 또한 양이 적지 않은데, 그러한 이 와중에 높은 확률로 확신에 가까운 그 행동을, 습관을 과연 어떻게 현실과 타협하며 지켜나가야 할 것인가?

+ 이번 WIL의 키워드

- react hooks

• Hook이란?
  
  Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
  
  
• 필요한 이유
  
  hook을 사용해 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있어 필요하다.
  
  
• 주의사항
  
  Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능저하를 불러올 수있다. Hook의 성능 최적화 방법은 후에 공부할 예정
  
  --> 그래서 예상기 매니저님이 데이터를 가장 잘 관리할 수 있게 코드를 짜는 게 좋은 프론트엔드 개발자라고 했구나
  
  
• Hook의 규칙
  
  1. 최상위에서만 Hook을 호출
  
  -React 함수(컴포넌트)의 최상위에서만 Hook을 호출 할 것.
  
  -반복문, 조건문, 중첩된 함수등에서 호출 X
  
  
  2. React 함수에서만 Hook을 호출
  
  -Custom Hook에서는 호출 가능
  
  -일반적인 Javascript 함수에서는 호출 X
  
  
  3. React는 Hook 호출되는 순서에 의존
  
  -hook은 위에서부터 아래로 순서에 맞게 동작한다.
  
  
• Hook의 최적화
  

1. 컴포넌트가 반드시 필요한 리랜더링만을 진행하는가?
2. 랜더링이 발생한다면, property 및 method가 반드시 필요한 것만 재할당 할 수 있게 하는가?
3. 위 2가지를 무시할만큼, 랜더링이 자주되는가? ) 따라서 메모리를 할당하면서 위의 2가지를 지키지 않아도 되는가?
   
   

• Hook 종류
  
  -자체적으로 제공하는 기본 Hook, 추가 Hook이 있고
  사용자가 만들어서 사용할 수 있는 Custom Hook이 있다.
  
  
• 기본 Hooks
  
  useState (동적 상태 관리)
  useEffect (side effect 수행 -mount/unmount/update)
  useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)
  
  
• 추가 Hooks
  
  useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
  useCallback (특정 함수 재사용)
  useMemo (연산한 값 재사용)
  useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
  useImperativeHandle
  useLayoutEffect
  useDebugValue

참조 블로그 (https://velog.io/@goyou123/React-Hooks-%EC%B4%9D%EC%A0%95%EB%A6%AC)