본문 바로가기
Frontend/React

[React] Basic Hooks / Additional Hooks / React Router Hooks

by SOLYI 2021. 11. 16.
  • Basic Hooks
    • useState: state를 대체 할 수 있다.
    • useEffect: 라이프 사이클 훅을 대체 할 수 있다
  • Additional Hooks
    • useReducer : state를 변경하는 로직이 담겨있는 함수
      • 다수의 하윗값을 포함하는 복잡한 정적 로직을 만들때
      • 다음 state가 이전state에 의존적일때
      • Redux를 안다면 쉽게 이용 가능
    • useMemo
    • useCallback
    • createRef: (Uncontrolled-createRef) : 항상 레퍼런스를 생성해서 렌더될때 넣어준다
    • useRef: (Uncontrolled-useRef) :  렌더사이에도 유지해준다. 최초 렌더시 undefiend -> 이후 태그 출력
  • React-Router-Hooks
    • useHistory 
      • 이전: props를 인자로 받아와서 props.history에 url을 push 해주는 방식
      • 사용: useHistory를 사용하면 history 에서 바로 push 가능
    • useParams
      • 이전: props를 인자로 받아와서 props.match.params.id 
      • 사용: useParams를 이용해 params.id 
    • useLocation
    • useRouteMatch
반응형