관리 메뉴

CASSIE'S BLOG

[슈퍼코딩] 63강 커스텀 훅 -1 본문

PROGRAMMING/슈퍼코딩 강의 정리

[슈퍼코딩] 63강 커스텀 훅 -1

ITSCASSIE1107 2023. 12. 22. 18:48
반응형

우리가 지금까지 사용한 훅 - 리액트 빌트인 훅

useState()
useEffect()
useRef()
useMemo()
useCallback()

useState(): 컴포넌트
안에서 상태를 관리할 수 있게 해준다.

useEffect(): 컴포넌트가 렌더링이 될 때마다 매번 실행할 로직을 담는 훅, 의존성 관리 가능

useRef(): 가상돔 형태로 리액트에서 로직들을 관리하는데 실제로 dom에 접근해서 값을 수정하거나 행동을 하는 그런 때에 사용한다.

useMemo()& useCallback()
불필요한 값이나 함수를 매번 생성되는 것을 줄여줄 수 있다.

내장된 훅만 가지고는 개발하기
한계가 있다.

재사용한 컴포넌트의 함수 버전이 커스텀훅이다.

practice/4_18

훅을 만들 때는 hooks라는 디렉토리를 만들어준다.

훅을 만들 때는 규칙이 있는데 use*** 이런 식으로 하면 된다고 함

중복되는 부분을 hook함수로 만든다고 함


ForwardCounter와 BackwardCounter


파일명 useHttp.js 이런 형식으로 만들어줘야함


기본 뼈대 만들고 return에 중괄호 만들어놓고

return 전에 아웃소싱할 코드들을 넣어준다.


먼저 통째로 복사하고
Http요청이랑 관계 없는 코드는 빼주고



반응형