[뷰쟁이의 리액트 시작하기] 리액트 hook 이란?

[!이시중] 2021년 10월 27일 20:44에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/42 에서 확인할 수 있음.

 

 

React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이었습니다. 그러나 클래스형 컴포넌트의 치명적인 단점은 컴포넌트 사이에서 상태 로직을 재 사용하기 어려우며, 이에따라 코드가 길고 복잡해짐을 야기합니다. 이를 보완하기 위하여 나온 것이 바로 hook입니다. (스우파 HOOK 아님 주의. 아이키 언니 멋있어요><) 그러니까 한 마디로 hook은 함수형 컴포넌트 + 상태 변화 관리 / 라이프 사이클 사용으로 클래스형 컴포넌트의 단점을 한방에 해결하였습니다.

 

그렇다고 하여 react에서 클래스형 컴포넌트를 삭제하겠다는 의미는 아닙니다.

 

기본적으로 hook은 useState, useEffect, useContext가 있으며, 추가적으로는 useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue 더하기 상황에 따라 사용자가 직접 정의하여 사용할 수 있는 custom hooks가 있습니다.

 

개인적으로 실무에서는 기본 hook, 3가지(useState, useEffect, useContext)로도 충분히 많은 기능을 구현할 수 있었으니 추가 hook들을 너무 외우지는 마시고, 필요에 따라 찾아보며 사용해도 무방할 것이라고 생각됩니다. (만, 저보다 훨씬 더 오래 실무에 계신 분들의 입장은 다를수도 있습니다.)

 

해당 hook들은

Import React, { 사용할 hook 이름 } from ‘react’

의 형식으로 언제든 사용이 가능합니다.

 

원래 해당 포스트는 useMemo에 대해서만 다루려고 했는데, 모든 hook들을 정리해서 올려두면 좋을 것 같다는 욕심이 생겼습니다. 생각보다 글이 길어질 것 같아 기본 hook들과 추가 hook, 사용자 정의 hook 정도로 글을 나누어 올리겠습니다.