Hook의 규칙

🧐 React Hooks란?
함수형 컴포넌트에서 state 관리와 Life Cycle을 다룰 수 있게 하는 기술이다.


🧐Hooks의 도입 이유?
클래스형 컴포넌트에서 발생하는 몇몇 불편한 점들을 극복하기 위해

- this 값의 변경
- 떨어지는 가독성
- HOC패턴의 Wrapper 지옥


🧐Hook의 규칙
최상위(at the Top Level)에서만 Hook을 호출해야 한다.
- 반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.
- 모든 렌더링에서 동일한 순서로 Hook을 호출해야 한다.

오직 React 함수 내에서 Hook을 호출해야 한다.
- 일반적인 JavaScript 함수에서 호출해서는 안 된다.
- React 함수 컴포넌트에서 Hook을 호출해야 한다.

 

 

Hook 이란?

• 2018년 React Conferences에서 처음 소개되어 React v16.8에 도입된 기술
• 함수 컴포넌트에서 React 기능을 사용할 수 있게 해주는 JavaScript 함수
• 클래스를 작성할 필요 없이 함수 컴포넌트에서 state 관리와 Life Cycle을 다룰 수 있게 해주는 기술
• Hook의 종류
  • useState()
  • useEffect()
  • useMemo()
  • useRef()
  • useCallback()
  • …

 

 

Hook의 규칙

 

최상위(at the Top Level)에서만 Hook을 호출해야 한다.

• 반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.
  • Hook 호출 순서가 컴포넌트의 렌더링 순서와 일치한다고 가정한다.
  • 따라서 모든 렌더링에서 동일한 순서로 Hook을 호출해야 한다.
  
  
  만약 조건문이나 반복문안에서 훅을 호출한다면 Hook이 어떤 조건에 따라 실행되지 않을 수 있다.
  • 렌더링 때마다 맨 처음 함수가 실행될 때 리액트가 기억해 놓은 Hook의 호출 순서가 다르게 실행될 것이고 결국 버그를 초래한다.
  • 이는 항상 리액트 함수 최상위 레벨에서만 훅을 호출해야 하는 이유이다.
  • 리액트는 이 Hook들을 호출되는 순서대로 저장해 놓는다.(=LinkedList)
  • 그래서 매 렌더링마다 순서대로 훅을 호출할 수 있는 것이다.

 

 

오직 React 함수 내에서 Hook을 호출해야 한다.

• 일반적인 JavaScript 함수에서 호출해서는 안 된다.
• React 함수 컴포넌트에서 Hook을 호출해야 한다.
• 커스텀 Hook은 'use'로 시작해야 한다.

 

 

잘못된 예

반복문, 조건문 또는 중첩된 함수 내에서 Hook을 호출해서는 안 된다.

import React, { useState, useEffect } from 'react';

function BadCounter() {
  const [count, setCount] = useState(0);

  // 조건문 안에서 useEffect를 호출하는 나쁜 예시
  if (count === 5) {
    useEffect(() => {
      alert('Count reached 5!');
    }, []);
  }

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default BadCounter;

• if 문 내에서 조건에 따라 useEffect를 호출하고 있다. React Hook 규칙을 위반하는 부분이다.
• useEffect는 항상 컴포넌트의 최상위 레벨에서 호출되어야 하고, 조건문 안에서 호출해서는 안 된다.
• 이러한 코드는 예기치 않은 동작을 유발할 수 있고, React의 최적화를 방해한다.
• count === 5가 아닐 경우 useEfffect을 건너뛰게 되면서 Hook의 호출 순서가 달라지게 된다.

 

 

옳은 예

import React, { useState, useEffect } from 'react';

function GoodCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // count가 5가 되면 alert을 표시합니다.
    if (count === 5) {
      alert('Count reached 5!');
    }
  }, [count]); // count가 변경될 때만 실행됩니다.

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default GoodCounter;

• useState 훅과 useEffect 훅은 컴포넌트 함수의 최상위 레벨에서 호출되었다.
• Hook 호출이 항상 동일한 위치에 있어서 React가 예측 가능한 동작을 수행할 수 있다.

 

 

규칙을 강제하는 플로그인

 

npm 바로가기

eslint-plugin-react-hooks

이 플러그인은 Create React App에 기본적으로 포함되어 있다.

npm install eslint-plugin-react-hooks --save-dev

// ESLint 설정 파일
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

 

 

Hooks는 왜 도입되었을까?

 

<Class /> 기존의 리액트는 클래스 컴포넌트를 기반으로 작업했다.

당시 함수형 컴포넌트가 존재했지만 클래스 컴포넌트에 비해 기능이 적었다.

 

 

클래스 컴포넌트의 단점

 

this

• this는 클래스 자신을 가리킴
• this가 가리키는 값은 변경될 수 있고 변경될 수 있기 때문에 문제가 발생
• 컴포넌트가 리렌더링 되면서 this가 가리키는 값이 변경되어 고정되지 않는 this로 인해 버그가 발생한다.

 

 

재사용성

• 클래스 컴포넌트에서 상태 로직을 재사용하기 쉽지 않다.
• HOC 패턴과 같은 방법으로 해결했지만 또 다른 문제가 발생한다.
• HOC라는 고차컴포넌트를 만들어서 재사용성을 높일 수 있지만 Wrapper 지옥이라는 커다란 문제가 있다.

 

 

떨어지는 가독성

초기값이 0인 count 상태를 선언하고, 버튼을 누르면 count + 1 되는 간단한 로직을 가지고 있는 컴포넌트

 

 

클래스형 컴포넌트

class Example extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
      count: 0,
    }
  }
  
  handleClick() {
  	this.setState({ count: this.state.count + 1});
  }
  
  render() {
  	return {
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick.bind(this)}>Click me</button>
      </div>
    }
  }
}

클래스형 컴포넌트 코드를 함수형 컴포넌트로 변경하면 아래와 같다.

 

 

함수형 컴포넌트

const Example = () => {
  const [count, setCount] = React.useState(0);
  
  const handleClick = () => {
  	setCount(count + 1);
  }
  
  return {
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  }
}

• 클래스형 컴포넌트에 비해 간단한 코드로 작성할 수 있다.
• Hook을 사용해서 상태와 상태 변경 함수를 명시적으로 선언할 수 있다.
• 클래스형 컴포넌트에서 필수적으로 사용해야 했던 this의 문제로부터 해방된 모습도 볼 수 있다.

 

 

HOC(Higher Order Component)란?

 

• Higher Order Component (고차 컴포넌트)
• 화면에서 재사용 가능한 로직을 분리해서 컴포넌트로 만들고, 재사용 불가능한 부분은 parameter로 받아서 처리하는 방법

 

// 사용자의 나이 정보 페이지

class UserProfile extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    fetchUsers().then((users) => {
      this.setState({ users });
    });
  }

  render() {
    const { users } = this.state;
   
   return (
      <div>
        {users.map(({ name, job }) => (
          <div key={name}>
            <p>{name}: {job}</<p>
          </div>
        ))}
      </div>
    );
  }
}

 

// 사용자의 직업 정보 페이지

class UserJobPage extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    fetchUsers().then((users) => {
      this.setState({ users });
    });
  }

  render() {
    const { users } = this.state;
    
    return (
      <div>
        <p>사용자의 직업 페이지</p>
        {users.map(({ name, job }) => (
          <div key={name}>
            <p>{name}: {job}</p>
          </div>
        ))}
      </div>
    );
  }
}

• 두 컴포넌트는 렌더링 하는 로직만 조금 다르고, 유저 정보를 fetch 해와서 상태로 저장하는 로직은 동일하다.

 

// 유저 fetching 로직을 수행하는 HOC

function usersHOC(Component) {
  return class extends React.Component {
    state = { 
    	users: [] 
    };

    componentDidMount() {
      	fetchUsers().then((users) => {
      		this.setState({ users });
    	});
    }

    render() {
      return <Component {...this.props} {...this.state} />;
    }
  };
}

• 중복된 유저 fetching 로직을 따로 분리해서 재사용성을 높이기
• usersHOC라는 고차컴포넌트를 만들어서 재사용성을 높일 수 있다.
• 두 페이지 컴포넌트에서 가지고 있던 유저 fetching 로직을 usersHOC 컴포넌트로 분리

 

function usersHOC(Component) {  // 인자로 컴포넌트 전달
  return class extends React.Component {
    state = { 
    	users: [] 
    };

    componentDidMount() {
      	fetchUsers().then((users) => {
      		this.setState({ users })
        });
    }

    render() {
      return <Component {...this.props} {...this.state} />;  <!-- 컴포넌트의 props로 유저 state 전달 -->
    }
  };
}

• usersHOC 컴포넌트는 유저 fetching 로직을 사용하는 컴포넌트를 인자로 받고,
• 인자로 받은 컴포넌트에 users state를 넘겨준다.

 

// 각 페이지 컴포넌트는 usersHOC를 감싸서 사용한다.

function UserAgePage({ users }) {
  // ... 여기에 UserAgePage 컴포넌트의 로직이 포함됩니다 ...
}

export default usersHOC(UserAgePage);

// 각 페이지 컴포넌트는 usersHOC를 감싸서 사용한다.

function UserJobPage({ users }) {
  // ... 여기에 UserJobPage 컴포넌트의 로직이 포함됩니다 ...
}

export default usersHOC(UserJobPage);

• 각 페이지 컴포넌트에는 usersHOC 컴포넌트를 감싸면 유제 페칭 로직을 사용할 수 있다.

 

 

HOC 패턴의 문제점 : Wrapper 지옥

 

HOC 패턴은 클래스 컴포넌트에서 재사용성을 위해 추천되는 패턴이었다. 그러나 HOC 패턴에는 Wrapper 지옥이라는 커다란 문제가 있다.

 

<ThemeHOC>
  <UserHOC>
    <AuthHOC>
	  <MyComponent />
    </AuthHOC>
  </UserHOC>
</ThemeHOC>

 

MyComponent에 테마 로직, 유저 관련 로직, 인증 로직을 적용하기 위해 각 고차컴포넌트들을 감싸줬다. 이렇게 고차 컴포넌트를 계속해서 감싸면 컴포넌트의 depth가 엄청 깊어지는 문제가 발생하는데, 이를 Wrapper 지옥이라고 한다.

 

 

Hook의 Life Cycle

 

Hooks를 사용하면 기존 생명 주기 함수를 사용하는 방식이 많이 변하게 된다.

 

• Mount : 처음 컴포넌트가 생성되고 렌더링을 거치는 과정을 의미
  • 클래스 컴포넌트에서는 componentDidMount() 함수를 실행

 

• Update : props 혹은 state가 변경되었을 때, forceUpdate() 함수가 실행되었을 때 리렌더링 하는 과정을 의미
  • 클래스 컴포넌트에서는 componentDidUpdate() 함수를 실행

 

• Unmount : 컴포넌트가 종료되는 과정을 의미
  • 클래스 컴포넌트에서는 componentWillUnmount() 함수를 실행

 

Hooks가 등장한 이후부터는 앞서 말한 클래스형 컴포넌트의 대표적인 생명 주기 함수 세 가지를 useEffect() 함수 하나로 모두 커버할 수 있게 되었다.

 

 

클래스형 컴포넌트

componentDidMount() {
  this.updateList(this.props.id);
}

componentDidUpdate() {
  if(prevProps.id === this.props.id) return;
  
  this.updateList(this.props.id);
}

Mount 될 때 updateList() 함수를 실행하고, 또 props id가 업데이트될 때 updateList() 함수를 실행하는 클래스형 컴포넌트의 코드

 

Hooks를 사용한 함수형 컴포넌트

useEffect(() => {
  updateList(id);
}, [id]);

useEffect() 훅 하나로 두 가지 라이프 사이클 함수의 기능을 아주 간단하게 작성할 수 있다.

 

 

클래스형 컴포넌트

componentDidMount() {
  document.body.style.overflow = 'hidden';
}

conponentWillUnmount() {
  document.body.style.removeProperty('overflow');
}

컴포넌트가 Mount 될 때 스크롤 방지 스타일을 추가하고, Unmount 될 때 스크롤 방지 스타일을 다시 없애주는 코드이다.

 

Hooks를 사용한 함수형 컴포넌트

useEffect(()=> {
  document.body.style.overflow = "hidden";
  
  return () => document.body.style.removeProperty("overflow");
}, []);

useEffect() 함수 하나 내에서 Mount, Unmount 두 가지 생명 주기에 대한 로직을 작성할 수 있게 되었다.

 

 

Custom Hook

 

Custom Hook이란 useState, useEffect와 같이 리액트에서 제공하는 Hook들을 이용해 개발자가 직접 만드는 Hook을 의미한다.

 

상태 관리나 생명 주기 로직들을 추상화하여 재사용 가능하도록 만드는 함수를 뜻한다.

 

HOC패턴으로 만든 유저 fetching 로직을 Custom Hook으로 만든다면 다음과 같다.

const useFetchUser = () => {
  const [users, setUsers] = useState([]);
  
  useEffect(()=> {
    fetchUsers().then((users) => {
      setUsers(users);
    });
  }, []);
  
  return { users };
}

• usersHOC 컴포넌트보다는 훨씬 간단하고 읽기 쉽다.
• users라는 상태를 선언하고, useEffect를 사용해 처음 마운트 될 때 fetchUsers 로직을 수행한다.

 

 

const UserAgePage = () => {
  const { users } = useFetchUser();
  
  return(
    ...

• useFetchUser 함수를 호출하는 단 한 줄만 추가해 주면 쉽게 사용이 가능하다.
• Wrapper 지옥같이 골치 아픈 문제는 발생하지 않는다.