Hook

1. Hook 등장배경 

 

클래스 컴포넌트의 기능은 리액트 초창기에 사용했으나 

함수 컴포넌트의 장점 때문에 함수 컴포넌트를 사용하고자 하는 필요가 점점 많아졌다 

 

함수 컴포넌트의 장점으로는

선언하기 편하고

직관적이고

메모리 자원을 덜 사용한다 

 

클래스 컴포넌트 에서만 사용 할수 있었던 

기능, 상태(state) 관리와 라이프 사이클(lifecycle) 관리 기능을 

함수 컴포넌트에서도 사용할수 있게 연동해주는 Hook이 등장하게 되었다 

 

즉, 클래스 컴포넌트의 기능(상태관리, 라이프 사이클관리)를 함수 컴포넌트에서 사용하도록 연동해주는 함수

 

 

 

2. Hook 특징

 

react에서는 useState와 같은 내장 Hook을 몇 가지 제공한다 

때문에 외부 라이브러리를 설치하지 않아도 된다 

다만 내장된 Hook이 없거나 외부라이브러리에도 없는 로직이 필요할 경우에는 

직접 Hook을 만들 수 있다 

이를 Custom Hook이라고 한다 

 

함수 컴포넌트에서만 사용이 가능하며

Hook의 이름은 반드시 use로 시작해야한다

 

 

3. Hook 사용규칙 

 

3-1. 함수 컴포넌트 혹은 custom hook 안에서만 호출 할 수 있다 

         위 두가지 경우를 제외한 곳에서는 Hook을 호출할 수 없다

         클래스 컴포넌트와 일반 자바스크립트 함수에서도 사용할 수 없다 

 

3-2. 최상위(at the top level)에서만 호출해야 한다

        반복문, 조건문 등 중첩된 함수 내에서는 hook을 호출할 수 없다 

        아래 예시를 통해 알아보자 

 

// useState Hook을 최상위에서 호출한 경우
// Test.js

import React, { useState } from 'react';

const Test = () => {
  const [color, setColor] = useState('red');

  if (5 > 3) {
    console.log('true');
  }

  return <div>Hello!</div>;
};

export default Test;

 

위 코드는 함수 컴포넌트의 첫번째 내부에서 호출을 해보았다 

아래의 코드는 if문 안에서 useState를 호출할 경우 에러가 발생한다 

 

// useState Hook을 조건문 안에서 실행한 경우
// Test.js

import React, { useState } from 'react';

const Test = () => {
  if (5 > 3) {
    const [color, setColor] = useState('red');
  }

  return <div>Hello!</div>;
};

export default Test;