useEffect, Memorization, Context 등

useEffect

• 함수형 컴포넌트에서 생명주기를 다룰 때 사용하는 리액트 훅
• 컴포넌트의 생명주기: 그 컴포넌트가 태어나고 죽을 때까지, 그 컴포넌트가 렌더링되고, 화면에서 사라질 때까지
• 생성, 삭제, 수정
• clean-up 함수: 삭제될 때 호출됨

Memorization

• 중복 계산을 피하기 위해 계산 결과를 저장해두고
  동일한 입력 값에 대해서는 이미 계산된 결과를 재사용하는 방법
• 특정 개념을 기억해두다

컴포넌트

• 렌더링: 그냥 최초 1번 생성되는 것
• 리-렌더링: 이미 생성된 컴포넌트가 다시 생성되는 것

1. 컴포넌트에 정의된 상태가 변경되었을 때
2. 컴포넌트에 전달된 props 객체가 변경되었을 때

• 불필요한 리-렌더링:
  React.memo() → memo() → 컴포넌트를 반환 함수를 고차함수(High-Order function)
  컴포넌트를 메모이제이션할 때 씀
  메모이제이션 낭비
  → 최대한 적게 사용해주는 게 효율적

• React.memo() // 고차함수? 컴포넌트를 반환 하는 함수

useCallback(함수, []);
useMemo(() => 값, []);

Context

1. Context 객체를 만든다
2. Context Provider를 만든다
3. Context Consumer를 만든다

Prop Drilling

https://velog.io/@rachel28/Prop-Drilling