이번 장에서 배운 내용은 아래와 같습니다.
state
와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것state
를 사용하기 위한 훅state
라는 것을 제공하지 않음state
를 사용하고 싶으면 useState()
훅을 사용해야 함const [변수명, set함수명] = useState(초기값);
useEffect()
훅만으로 클래스 컴포넌트의 생명주기 함수들과 동일한 기능을 수행할 수 있음useEffect(이펙트 함수, 의존성 배열);
[]
)을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행됨props
와 state
에 접근할 수 있음useEffect()
에서 리턴하는 함수는 컴포넌트 마운트가 해제될 때 호출됨useMemo()
에 넣으면 안됨const memoizedValue = useMemo(값 생성 함수, 의존성 배열);
useMemo()
훅과 유사하지만, 값이 아닌 함수를 반환한다는 점이 다름useCallback(콜백 함수, 의존성 배열);
은 useMemo(() => 콜백 함수, 의존성 배열);
와 동일useCallback()
훅을 사용하여 불필요한 함수 재정의 작업을 없애는 것const memoizedCallback = useCallback(콜백 함수, 의존성 배열);
const refObject = useRef(초깃값);
.current
라는 속성을 통해서 접근use
로 시작하고 내부에서 다른 훅을 호출하는 단순한 자바스크립트 함수use
로 시작하지 않으면 특정 함수의 내부에서 훅을 호출하는지를 알 수 없기 때문에 훅의 규칙 위반 여부를 자동으로 확인할 수 없음이번 장에서 배운 내용의 양이 꽤 많은데, 훅은 그만큼 중요한 부분이기 때문에 이해가 되지 않는 부분이 있다면 여러번 반복해서 읽기를 바랍니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page