[React] 함수형 컴포넌트와 훅

안녕하세요, Einere입니다.

(광고 차단 기능을 꺼주시면 감사하겠습니다.)

---

이전 글에서, React의 클래스형 컴포넌트에 사용되는 생명주기 함수들을 정리했습니다.

그렇다면 이번 글에서는 함수형 컴포넌트의 생명주기 함수로 볼 수 있는 훅들에 대해 정리해보도록 하겠습니다.

 

Hook

훅은 React 16.8.0부터 도입되었습니다. class 없이 리액트 컴포넌트를 사용할 수 있게 해 줍니다.

또한, 함수 컴포넌트에서 상태와 생명주기 기능_{lifecycle feature}를 연동_{hook into}할 수 있게 해주는 함수입니다. 단, 클래스 컴포넌트 내부에서는 동작하지 않습니다.

 

필요성

훅을 도입하게 된 배경은 다음과 같습니다.

 

1. 컴포넌트 간 상태와 관련된 로직을 재활용하기 어려웠다.
2. 복잡한 컴포넌트를 이해하기 어려웠다.
3. Class는 사람과 기계를 혼동시킨다.

이러한 문제점을 개선하기 위해 훅을 도입했다고 하네요.

개인적으로는 커스텀 훅을 통해 여러 가지 로직을 컴포넌트로부터 분리할 수 있다는 것이 제일 좋은 것 같습니다.

 

특징

컴포넌트로부터 상태 관련 로직을 추상화하고 재사용할 수 있습니다.

컴포넌트를 로직(구독 설정 및 데이터 패치)에 기반을 둔 작은 함수로 나눌 수 있습니다.

 

규칙

훅을 사용하기 위해서는 다음 두 가지 사항을 지켜야 합니다.

1. 최상위에서 훅을 호출해야 합니다. 반복문이나 조건문, 중첩된 함수 내부에서 호출하지 마세요. (다른 말로 하자면, 훅들의 호출 순서를 보장해야 합니다.)
2. 함수 컴포넌트 혹은 커스텀 훅 내부에서만 호출해야 합니다.

 

기본 Hook

useState()

클래스 컴포넌트의 setState()와 유사합니다. 하지만 새로운 상태를 이전의 상태와 합치지는 않습니다.

상태 값과 그 값을 갱신하는 함수를 반환합니다. 인자로 값 혹은 값을 반환하는 함수를 받습니다.

인자로 받은 값이 최초의 상태가 되며, setState()를 통해 상태를 갱신할 수 있습니다. (setState()는 새로운 상태 값 혹은 함수를 인자로 받습니다.) 이 경우, 리렌더링 후의 첫 번째 반환 값은 갱신된 값을 가집니다.

 

useEffect()

해당 함수는 클래스 컴포넌트의 componentDidMount() 나 componentDidUpdate(), componentWillUnmount()를 하나로 합친 것과 동일합니다.

첫번째 인자에는 특정 이펙트를 발생시키는(부수효과를 일으키는) 함수를, 두 번째 인자는 의존성 배열을 받습니다.

여러 가지 이펙트를 일으키는 로직을 함수 컴포넌트 내부에 작성하는 대신, 이 함수 내부에 작성하는 것이 좋습니다.

인자로 받은 함수는 초기 렌더링을 포함하여, 렌더링 직후 호출됩니다. 더 정확하게 말하자면, 레이아웃 배치와 그리기 작업을 수행하는 렌더링 이후에 호출됩니다. 인자로 받는 함수는 정리_clean-up 함수를 반환할 수 있는데, 해당 함수는 클래스 컴포넌트의 componentWillUnmount()와 유사합니다.

두 번째 인자로 빈 배열을 주게 되면 초창기 렌더링 직후에만 호출하게 할 수 있으며, 의존할 변수들을 포함한 배열을 주면 해당 값들이 갱신될 때 호출되게 할 수 있습니다.

 

useContext()

클래스 컴포넌트의 Context API와 유사합니다. 컴포넌트 트리 내에서, 특정 서브 트리에 전역으로 공유되는 값을 설정하고 구독할 때 유용합니다.

createContext()와 같이 사용하는 함수입니다.

context값을 받아, 해당 컨텍스트의 현재 값을 반환합니다. 이 값은 함수를 호출한 컴포넌트로부터 제일 가까운 Context Provider의 value로 설정된 값입니다.

만약 가장 가까운 Context Provider가 갱신되면, 해당 프로바이더의 value속성에 할당된 값을 기반으로 리렌더링을 진행합니다. 단, 리렌더링이 수행되는 컴포넌트는 useContext()를 호출한 컴포넌트입니다. 따라서 리렌더링의 비용이 크다면, Memoization을 이용해 최적화할 수 있습니다.

 

추가 Hook

useReducer()

useCallback()

useMemo()

useRef()

useImperativeHandle()

useLayoutEffect()

useDebugValue()

 

Custom Hook