[React] 훅(Hooks)

리액트 훅(React Hooks)🤔🤔

• 리액트 16.8 버전부터 추가된 기능, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능

현재 듣는 리액트 강의에서 이러한 훅을 사용해서 개발을 하고 있었다.
들으면서 잘 이해가 가지 않는 부분도 있었고 정리가 필요하다고 느껴 훅에 대해서 간단하게 알아보려고 한다.

장점

• 기존 방식의 개발은 상태관련 로직이 한 곳에 묶여있기에 상태 로직의 재사용이 불가능하고 테스트가 어려웠지만 훅은 상태관련 로직을 추상화하여 재사용과 테스트가 가능
• 직관성을 가짐
• 더 빠른 성능과 코드의 양이 짧아짐
  
  

규칙

• 최상위 레벨에서만 호출 가능. 반복문, 조건문, 중첩된 함수 내부에서 호출 불가
• 오직 리액트 함수 컴포넌트 내에서만 호출 가능
  
  

❕ 리액트 내장 훅 API ❗

1. useState()
2. useEffect()
3. useContext()
4. useRef()
5. useReducer()
6. useMemo()
7. useCallback()