[React.js] Hooks
Hook
리액트는 클래스 컴포넌트와 함수형 컴포넌트 두가지로 나눠진다. (함수형 : hook)
원래 리액트에선 Class 컴포넌트만 이용할 수 있었지만, hook을 사용하면 class를 작성할 필요 없이 react와 상태값을 사용할 수 있다.
hook의 특징
- 상태관련 로직을 재사용할 수 있도록 도와준다.
- 컴포넌트 재사용을 좀더 유려하게 해주고, 로직에 기반을 둔 함수들도 컴포넌트를 나눠줄 수 있다.
- class를 사용하지 않고 state를 사용할 수 있다.
- componentDidMount, componentWillUnmount... 등 라이프 사이클을 컴퍼넌트 안에 입력해주지 않아도 된다.
한 마디로, hook은 state 관리를 할 수 있고 라이프사이클을 작성하지 않아도 되고, 코드의 재활용성이 좋다.
hook의 종류
1. useState
- component의 동적인 상태 관리
2. useEffect()
- component가 렌더링 될때마다 특정 동작을 수행할수 있도록 함
3. useMemo()
- 복잡한 함수 코드를 기억하여 특정 상태값이 변경됨을 감지하여 그때만 실행, 변경되지 않았다면 기억해놨던 코드를 그대로 사용
4. useCallback()
- 함수 자체를 통채로 기억한다. useMemo와 비슷하지만 다르다.
5. useRef()
- Ref를 쉽게 사용할수 있게 해준다.
- useRef를 통해 만든 객체 안의 current가 실제 엘리먼트를 가리킨다.
6. useReducer()
- 현재 상태에서 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수.
- 반드시 불변성을 지켜줘야 한다.
- 첫번째 인자로 reducer 함수를 받고, 두번째 인자엔 기본값을 넣어준다.
useMemo, useCallback, useRef -> 두번째 인자 값이 변해야 재실행된다.
useMemo, useCallback -> 기억력이 너어무 좋아서 인자에 값을 넣어서 변경해주어야한다. 그렇지 않으면 처음 값을 계속 기억하고 있다.
이러한 것들을 hook 이라고 부른다.
hook의 종류는 이 여섯가지 외에도 있으니 필요할때 찾아서 쓰도록하자.
-
최근엔 class형 함수보다 hooks형 함수를 더 많이 사용한다고 한다.
그러나 가끔 예전 프로젝트를 유지보수할때 class형태의 리액트를 만날 수 있으니
class <-> hooks component 변환을 해보며 두가지 다 해보는것이 좋을 것 같다.