[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 변환을 해보며 두가지 다 해보는것이 좋을 것 같다.