[TIL/23]06.20.Tue.

Today I Studied

• 리액트 숙련주차 1주차

  • 1-06: React Hooks-useContext
  • 1-07: React Hooks-React.memo
  • 1-08: React Hooks-useCallback
  • 1-09: React Hooks-useMemo
  • 1-10: Lifecycle
  • 1-11: DOM과 Virtual DOM
  • 1-12: Redux 소개
  • 1-13: Redux 설정
  • 1-14: Redux Counter: useSelector
  • 1-15: Redux Counter: useDispatch
  • 1-16: Redux Action Value Creator
  • 1-17: Redux Payload
  • 1-18: Redux Ducks Pattern: 협업 시 가독성을 높이기 위한 약속
  • 1-19: React Router Dom

• PS

  • Programmers/코딩기초트레이닝/Day25: 완료
  • 스터디: Programmers/코딩기초트레이닝/Day15

---

Today I Learned

• prop drilling: 부모->자식 Props가 너무 깊어져 관계 파악이 어려운 현상
• context API: 단계별로 data를 전달하는 props와 다르게 모든 data에 접근이 가능함
  • createContext: context 생성
  • Consumer: context 변화 감지
  • Provider: context 전달(to 하위 컴포넌트)
  • 그러나 context 사용할 경우, 하나의 value가 바뀔 경우 리랜더링이 발생하여 사용할 떄 해당 부분을 고려해야함.
• 리랜더링 발생조건
  • 컴포넌트에서 state 바뀌었을 때
  • 컴포넌트가 내려받은 props가 변경되었을 때
  • 부모 컴포넌트가 리랜더링 된 경우 자식 컴포넌트 모두: memo
• 최적화: 불필요한 리랜더링을 최소화하여 비용을 줄이는 것
• 캐싱: 메모리에 저장하여 쓸모없는 리랜더링을 방지, usememo이용
• useCallback: 특정 함수의 리랜더링을 방지
• useMemo: value의 리랜더링 방지, 남발하게 되면 오히려 메모리를 많이 차지하여 비용을 낭비하게 될 수 있다.
• React.memo: 컴포넌트의 리랜더링 방지
• Virtual DOM: 리액트에서 고성능 알고리즘으로 랜더링을 할 때 사용
  • 실제돔과 구조가 완전히 동일한 복사본 형태
  • 객체 형태로 메모리에 저장되어 더 빠르게 조작가능
  • 랜더링이 일어난다 === 엘리먼트 DOM 요소가 갱신됨.
  • batch Update: 갱신을 한번만 하여, 실제 DOM보다 painting 작업이 줄어들어 효율적이다.
• Redux를 사용하면 Props 없이 랜더링이 가능하다. 중앙 state 관리소를 사용할 수 있게 도와주는 패키지 라이브러리
  yarn add redux react-redux
• action 객체는 action type을 payload 만큼 store에 보내는 것

---

🕰️ 오늘의 공부시간 : 8:15