use(Effect, Memo, Callback)

</aside>

목차

useEffect

useEffect

Hook을 이용해서 컴포넌트가 처음 마운트 되고, 언마운트 되고, 특정 props가 변경 될 때(업데이트 될 때) 사용하는 방법. 클래스형 컴포넌트의 생명주기와 비슷하다. useState 처럼 반드시 컴포넌트 함수 안에서 사용해야 한다.

import { useEffect } from 'react' 로 불러올 수 있다.
useEffect(함수, 의존값이 있는 배열(deps)) 형태로 사용한다. 두번째 인자인 배열을 넣지 않으면 컴포넌트가 처음 마운트 될 때만 useEffect에 등록한 함수가 호출된다.
첫번째 인자로 등록한 함수에서 특정 함수를 return 할 수 있는데, 이것을 cleanup 함수라고 한다. deps가 비어있는 경우에는 컴포넌트가 사라질 때 호출된다. (componentWillUnmount 처럼 동작)
componentDidMount 메서드 처럼, 외부 API에 요청하는 경우에 주로 사용된다.

useEffect hook을 실전적으로 잘 활용하는 방법에 대해서 👉여기 에 다시 기록했습니다.

useMemo

연산을 도와주는 재사용 함수라고 할 수 있다. 주로 성능 최적화를 위하여 사용된다. 이전에 계산한 값을 기억하고 재사용 할 수 있게 만들어준다.

import { useMemo } from 'react' 로 불러올 수 있다.
useEffect(연산을 정의하는 함수, 의존값이 있는 배열(deps)) 형태로 사용한다. deps에 등록한 내용이 변경되면, 등록한 연산 함수를 호출해서 값을 연산한다. deps의 내용이 바뀌지 않았다면, 이전에 연산한 값을 재사용 한다.