[React] React Hooks 공부하기!

Hook이란?

Hook은 React 버전 16.8부터 React요소로 새로 추가되었다. Hook을 이용하여 기존 Class바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있도록 만든 라이브러리이다.

• Function 컴포넌트를 Class 컴포넌트처럼 사용할 수 있다.
• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.
• Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.

---

Hook의 규칙

1. 최상위에서만 Hook 호출

• 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
• early return이 실행되기 전에 항상 React 함수의 최상위에서 Hook을 호출해야 한다.

 

잘못된 Hook 사용방법

export default function App(){
const [data,setData] = useState();

if (data !== ""){
	useEffect(()=>
    		...
           );
		}
        
//만약 data값이 빈값일 경우 if문이 false가 되어 useEffect()가 호출이 되지 않는다.
//조건문의 결과에 따라 useEffect()의 사용이 좌우되므로 잘못된 코드이다.

2. 오직 React함수 내에서 Hook을 호출

• Hook을 일반적인 JavaScript 함수에서 호출하면 안된다.
• React 함수 컴포넌트 또는 Custom Hook에서 호출✅

---

React에서 기본적으로 지원하는 Hooks

1. useState

컴포넌트(Component)의 상태(State)를 관리

상태에 따라 다른 화면 출력

2. useEffect

랜더링 이후에 실행할 코드를 만듦

어떤 변수가 변경될 때 마다 특정기능이 작동하도록 함

3. useContext

부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의

4. useReducer

상태(State) 업데이트 로직을 reducer 함수에 따로 분리

5. useRef

컴포넌트나 HTML 요소를 래퍼런스로 관리 

6. forwardRef

useRef로 만든 래퍼런스를 상위 컴포넌트로 전달

7. useImperativeHandle

useRef로 만든 래퍼런스의 상태에 따라 실행할 함수를 정의

8. useMemo , useCallback

의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의 ( BUT 재랜더링시 정의 ❌ )

9. useLayoutEffect

모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정의

10. useDebugValue

사용자 정의 Hook의 디버깅을 도움

 

이외에도 사용자가 만들어서 사용할 수 있는 Custom Hook이 있다.