[ReactJS] Hook 개념 알아보기

❓ Hook을 사용하는 이유 

hook이 나오기 전에 사람들은 Class를 이용하여 컴포넌트를 작성했습니다. 이제는 hook을 통해 state를 관리하고 여러 react 기능을 사용할 수 있습니다.

 

hook 이전에는 HOC(Higher Order Component)를 이용하여 코드를 반복해서 작성을 해야 하는 문제를 해결하려고 했습니다.

"HOC"이란 화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분은 parameter로 받아서 처리하도록 하는 패턴입니다. 즉, 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수라고 생각하시면 됩니다.

하지만 HOC을 사용했을 때, wrapper hell이라는 또 다른 문제가 발생할 수 있는데요!

"wrapper hell"이란 중첩되는 component가 많아져 depth가 깊어지는 것을 의미합니다.

 

LifeCycle API는 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 면경되어서 상채를 업데이트하기 전 후로 실행되는 메서드들을 의미합니다.

Class를 이용하여 컴포넌트를 작성하면, componentDidMount, componentWillUnmount, componentWillUpdate 등의 LifeCycle API를 이용하여 작업을 처리 하하 게 되어 함수는 단일 책임 원칙을 벗어나게 되고, 코드는 복잡해지며, 테스트는 점차 어려워졌습니다.

 

=> hook은 로직 분리가 가능하면서 wrapper hells를 피하고, 리액트 copmonent life cycle에 종속적이지 않도록 해줍니다.

 

 

 

 

 

👍 Hook의 특징

1. Hook을 사용하여 컴포넌트로부터 상태 관련 로직을 추상화

    ➡️ 계층 변화 없이 상태 관련 로직을 재사용 가능 !

 

2. Class 없이 리액트 기능을 사용 가능

    ➡️ 함수형 프로그래밍 가능 !

 

3. 클래스를 대체하는 것은 아니다.

    ➡️ Class와 hook 중 선택적 사용 가능 !

( 공식 문서에 따르면, 이미 짜 놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않고, 새로 만드는 컴포넌트를 hook으로 작성하는 것을 권장한다고 합니다.)

 

 

 

 

 

📖 Hook 사용 규칙

1. 최상위에서만 Hook을 호출해야 합니다.

    (반복문, 조건문, 중첩된 함수 내에서 Hook 실행 ❌)   

// 👎규칙을 어기고 있음.
if (name !== '') { 
    useEffect(function persistForm() {
        localStorage.setItem('formData', name);
    });
}

// 👍조건부로 실행하기 원할 때
useEffect(function persistForm() {
    if (name !== '') {
		localStorage.setItem('formData', name);
	}
});
  

 

2. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.

    (custom hook에서는 호출이 가능하지만, 일반 JavaScript 함수에서는 호출 ❌)

 

 

 

 

 

 

 

🧑🏻‍💻 다음 포스팅에서는 React가 제공하는 Hook API에 대해서 알아보겠습니다! 🧑🏻‍💻

 

 

참고 링크 🙏

Hook의 개요 – React

Hook의 규칙 – React

React의 새로운 패러다임, React Hooks

리액트(React) 이해 4 - Higher Order Component(HOC)로 컴포넌트 재사용 하기