[React] Hook 정리

리액트에는 Hook이라는 개념을 통해 기존에 강세이던 클래스 문법에서 벗어나 함수형 문법을 이용하는 계기가 되었다.

 

Hook에는 무엇이 있고, 각각을 간략하게 정리하고자 한다. (꾸준히 수정 예정)

---

1. useState()

컴포넌트의 상태를 관리하기 용이하다.
상황에 따라 다른 값을 저장하거나, 다른 화면을 출력할 때 사용한다.

2. useEffect()

최초 렌더링 이후 (컴포넌트가 업데이트 되는 경우 포함) 실행할 코드를 작성한다. 
뿐만 아니라, 기존 클래스 문법의 생명주기를 두번째 인자에 따라 나타낼 수 있다.

3.useContext()

컴포넌트의 인접한 부모-자식이 아닌 관계에 대해 값을 주고받기 용이하며, Redux와 어느정도 유사한 개념이라고 볼 수 있다.

4. useReducer()

상태관리 라이브러리인 Redux를 사용할 때 사용할 수 있다.
컴포넌트의 어떤 부모-자식 관계로부터도 자유롭고, 유지보수에 유리하며 코드 또한 깔끔하다.

5. useRef()

함수형 컴포넌트에서 돔 요소에 접근할 수 있는 훅.
useRef를 통해서 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.

6. useMemo()

이전의 값을 기억하여 성능을 최적화하는 용도이다.
렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 
다시 사용하는 방식이다.

7. useCallback()

useMemo 훅과 비슷하게 성능 최적화를 위한 훅이며, 이벤트 핸들러 함수를 필요로 할 때만 생성이 가능하다.
useCallback 첫번째 파라미터로 기존 함수를 넣어주고, 두번째 파라미터로 [] 배열을 넣어주면 된다.

---

※ useMemo()와 useCallback()의 차이??