본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

Hooks 개요

Hook이란?

• 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용

Hook의 등장 배경

• 기존
  • 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트를 사용
• Hook
  • 기존에 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가

유의사항

• React함수(컴포넌트, Hook) 내에서만 사용가능
• Hook의 이름은 반드시 'use'로 시작
• 최상위 레벨에서만 Hook을 호출

State Hook과 Effect Hook

State Hook

const [state이름, setState이름] = useState(초기값)

• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook
• 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시한다.
• State는 읽기 전용이다.
• State를 변경하기 위해서는 setState를 이용한다.
  • 직접 변경
    • setTitle("Hello")
  • 현재 값을 매개변수로 받는 함수를 전달

    •   setTitle((current) => {
            return current + " World";
        })

• state가 변경되면 자동으로 컴포넌트가 재렌더링 된다.

Effect Hook

useEffect(EffectCallback, Deps)

• Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
• 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 Effect 콜백함수가 호출
• Deps는 변경을 감지할 변수들의 집합(배열)
• EffectCallback은 Deps에 지정된 변수가 변경될 때 실행할 함수

이외의 Hooks

useMemo

const fullname = useMemo(() => {
  return '${firstName} ${lastName}'
}, [firstName, lastName])

• 변수를 메모이제이션한다.
• 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션
• 재렌더링 시 불필요한 연산을 줄인다.
• 시간이 오래걸리는 로직은 작성하지 않는다.

useCallback

• 함수를 메모이제이션한다.
• useMemo와 사용법이 같다

useRef

const inputRef = useRef(null)

• 컴포넌트 생애주기 내에서 유지할 ref 객체를 반환한다.
• ref 객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
• 일반적으로 React에서 DOM Element에 접근할 때 사용
• useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.

나만의 Hook 만들기

Custom Hook

• 함수를 분리하는 것처럼 Hook을 만드는 것
• Hook의 이름은 'use'로 시작해야한다.
• 한 Hook 내의 state는 공유되지 않는다.