HOOK 이란?

훅 HOOK 이란?

Hook은 React 16.8부터 추가되었고 기존 클래스형 컴포넌트에서만 사용가능하던 상태관리, 라이프사이클 메소드 등을 사용할 수 있게 해주는 기능이다.

 

16.8이전 버전에서는 함수형 컴포넌트 내에서 상태관리가 불가능했다.
라이프사이클 메소드 - componentDidMount, componentWillUnmount, componentDidUpdate

Hook의 장점

- 코드가 간결해진다

- 가독성이 좋아진다

- HOC 헬을 벗어 날 수 있다.

HOOK 사용 규칙

훅 사용시엔 리액트에서 규정한 규칙을 지켜야 코드가 정상적으로 실행되고 코드가 꼬이지 않는다.

사용 규칙은 아래와 같다.

---

- 컴포넌트 최상위에서만 호출해야 한다.
- React 함수 내에서만 호출해야 한다.
- Custom Hook을 만들땐 반드시 앞에 use를 붙여야한다.  
   (공홈 - Hook 규칙이 적용되는지를 파악할 수 있기 때문)

클래스형 컴포넌트 vs 함수형 컴포넌트

CASE 1 : 컴포넌트가 마운트 됐을 때와 검색 값이 변경됐을 때 API호출 후 검색 리스트를 보여줘야함  
CASE 2 : 로직 재사용

 

위와 같은 두개의 상황이 있다고 가정하고 코드를 살펴보자.

---

# CASE 1  : 컴포넌트가 마운트 됐을 때와 검색 값이 변경됐을 때 API호출 후 리스트 보여주기

클래스형 컴포넌트

class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      keyword: '',
    };
  }

  componentDidMount() {
    this.fetch('');
  }

  componentDidUpdate() {
    this.fetch(this.state.keyword);
  }

  async fetch(keyword) {
    const data = await fetchApi({ url: `/lookup?keyword=${keyword}` });

    this.setState({
      data,
      keyword: this.state.keyword,
    });
  }

  render() {
    return (
      <>
        {data.map((v, i) => (
          <div key={i}>{v.title}</div>
        ))}
      </>
    );
  }
}

---

함수형 컴포넌트

const Home = () => {
  // Hook은 여러번 사용이 가능해 클래스와달리 목적별로 분리 가능
  const [data, setData] = useState([]);
  const [keyword, setKeyword] = useState({
    data: [],
    keyword: '',
  });

  useEffect(() => {
    async () => {
      const data = await fetchApi({ url: `/lookup?keyword=${keyword}` });
      setData(data);
    };
  }, [keyword]);

  return (
    <>
      {data.map((v, i) => (
        <div key={i}>{v.title}</div>
      ))}
    </>
  );
};

위 두 예제만 봐도 클래스형 컴포넌트보다 함수형 컴포넌트의 코드가 훨씬 간결하고 이해하기 쉽다.

---

# CASE2 : 로직 재사용

클래스형 컴포넌트 

const HocHell = () => {
  return (
    <WithA>
      <WithB>
        <WithC>
          <Component />
        </WithC>
      </WithB>
    </WithA>
  );
};

로직 재사용 측면에서 봤을때 자주 클래스형 컴포넌트의 자주 경우 사용되는 로직을 고차 컴포넌트(HOC)로 분리해서 사용하게 된다. 한두개의 로직만 사용했을땐 별다른 문제점을 느끼지 못할 수 있지만 위와 같이 여러개의 로직들이 중첩되어 사용되면 코드를 추적하기 힘들어지고 이는 결국 디버깅이 힘들어진다.

---

함수형 컴포넌트

const Hook = () => {
  const widthA = useWidthA();
  const widthB = useWidthB();
  const widthC = useWidthC();

  return <Component withA={withA} withA={withA} withA={withA} />;
};

함수형 컴포넌트의 경우엔 반복되는 로직을 커스텀 훅으로 만들어 재사용이 가능하기 때문에 클래스형 컴포넌트 보다 훨씬 자유롭고 깔끔하게 사용가능하다.