/React_Hook_Study

아..

Primary LanguageJavaScript

React Hook Study


useState ✅

  • 무거운 초기값을 가져올때 ✅
  • 버튼 누르면 state 변경 ✅

useEffect ✅

  • 상황별 useEffect ✅
  • 클린업(Clean Up/ 정리작업) ✅

useRef ✅

  • state와 ref의 차이 ✅
  • 컴포넌트 내 변수와 ref의 차이 ✅
  • 렌더링이 몇 번 되었는지 출력(좋은 예 + 안좋은 예) ✅
  • Ref로 DOM요소 접근하기 ✅

useMemo ✅

  • useMemo를 사용하지 않은 경우의 무거운 계산 ✅
  • useMemo를 사용한 경우의 무거운 계산 ✅
  • useMemo 응용 => 객체의 주소값이 변경될 때마다 리렌더링 되는 것 최적화 하기 ✅

useCallback ✅

  • useCallback을 적용하지 않은 경우 ✅
  • useCallback을 적용한 경우 ✅
  • useCallback을 활용해 스타일 적용하기(with. 최적화) ✅

useContext ✅

  • Prop Drilling의 경우 ✅
  • Context를 적용한 경우 ✅

useReducer ✅

  • 간단한 은행 입출금 예제 ✅
  • useReducer를 이용한 출석부 예제 ✅

React.memo ✅

  • React.memo 사용하기 ✅
  • useMemo + React.memo ✅
  • useCallback + React.memo ✅

Custom Hook ✅

  • Custom Hook 컨셉 이해하기 ✅
  • useInput Custom Hook 만들기 ✅
  • useFetch Custom Hook 만들기 ✅