[React] Hooks

유진·2023년 10월 28일

리액트

목록 보기

5/8

📝 Hook이란?

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

Hook의 배경

기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트(Class Component)를 사용하여야 했다.
그러나 개발자가 느끼기에 다소 복잡한 클래스 컴포넌트(Class Component)를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 구현하기 위해 React 16.8 버전에 추가된 것이 바로 Hook이다.

🎯 Hook의 특징

Hook은 React 함수(컴포넌트, Hook) 내에서만
사용이 가능하다.
Hook의 이름은 반드시 ‘use’로 시작해야 한다.
최상위 Level에서만 Hook을 호출할 수 있다.
(if문, for문 안 쪽 또는 콜백함수 내에서 호출하면 안된다.)

📈 Hook의 장점

컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링할 필요가 없다.
- React hooks를 사용하면 함수 구성 요소로만 상태 관리를 할 수 있기 때문에 리팩토링 노력이 최소화.
UI에서 로직을 더 쉽게 분리하여 두 가지 모두 재사용 가능하다.
- 코드를 재사용하기 위한 로직을 쉽게 만들 수 있다.
- Hook은 더 적은 상용구와 더 직관적인 UI 및 논리 구성으로 더 세련되게 구현할 수 있다.
- 코드의 재사용은 작성해야 할 코드의 양을 줄어들게 함으로써 코드의 가독성 또한 좋아진다.
기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다.
- 기존의 코드와 잘 호환이 되기 때문에 필요한 곳에서 Hook을 사용할 수 있다.
Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화가 가능하다.
- Hook을 이용하면 컴포넌트별로 독립적인 테스트와 재사용이 가능해진다.
- Hook은 컴포넌트 간 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.

State Hook

const App = () => {
  // 일반적인 useState 사용법
  const [state이름, setState이름] = useState(초기값)
}

상태를 저장하거나 재지정하는 역할을 한다.
useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook이다.
최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시된다.
state는 읽기 전용이므로 직접 수정하면 안된다.
state를 변경하기 위해서는 setState를 이용해야 한다.
state가 변경되면 자동으로 컴포넌트가 재 렌더링된다.

Effect Hook

const App = () => {
	useEffect(EffectCallback, Deps?)
}

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

side effect란 함수(React의 함수형 컴포넌트) 외부에서 로컬의 상태 값을 변경하는 것
함수형 컴포넌트에서 실행 가능하다.
컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop가 변경될 때마다 EffectCallback 함수가 호출된다.
값이 없거나 빈 배열인 경우 해당 컴포넌트가 마운트되면, 즉 가상 DOM에 그려질 때 딱 한 번 실행이 된다.
Deps: 변경을 감지할 변수들의 집합(배열)
EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수

내장 Hook

1) useMemo

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')

  // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
      return ′${firstName} ${lastName}′
    }, [firstName, lastName])
}

지정한 State나 Props가 변경될 경우 해당값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다.
useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직은 작성하지 않는 것을 권장한다.

2) useCallback

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')

// 이름과 성이 바뀔 때마다
// 풀네임을 return하는 함수를 메모이제이션
  const getfullName = useCallback(() => {
    return ′${firstName} ${lastName}′
  }, [firstName, lastName])

  return <>{fullname}</>
}

함수를 메모이제이션하기 위해 사용하는 Hook이다. 컴포넌트가 재렌더링될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
useMemo(() => fn, deps) 와 useCallback(fn, deps) 는 같다.

3) useRef

const App = () => {
  const inputRef = useRef(null)
  const onButtonClick = () => {
  	inputRef.current.focus()
  }
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>
      	input으로 포커스
      </button>
    </div>
  )
}

컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
직접 HTML의 요소에 접근이 가능하도록 도와주는 훅이다.
ref 객체는 .current라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있다.
일반적으로 React에서 DOM Element에 접근할 때 사용한다(DOM Element의 ref 속성을 이용한다.)
useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않는다.
언제든지 수정이 가능한 객체를 보관할 수 있게 도와주는 훅으로 사용할 수 있다. 즉, 어떠한 값을 기억하고 있다가 나중에 사용하거나 값을 변경할 수 있다.