Hook

React에는 다음과 같은 불편함이 있었다.

• 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.
• 복잡한 컴포넌트들은 이해하기 어렵다.
• Class는 사람과 기계를 혼동시킨다.

다음과 같은 문제점을 해결하기 위해 등장한 것이 바로 Hook이다.

Hook : Class 없이 상태를 관리할 수 있게 해주는 도구

특징

• Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 도와준다.
• Hook을 통해 서로 비슷한 기능을 하는 함수의 묶음으로 컴포넌트를 나눌 수 있다.
• Class 없이 React 기능들을 사용하는 방법을 제시한다.

📌 State Hook

import React, { useState } from 'react';

function Example() {
  //count 라는 새 상태 변수를 선언한다.
  const [count, setCount] = useState(0);
 ... 
}

여기서 사용되는 useState가 바로 Hook이다. useState를 통해서 변수명 count라는 상태 변수가 생성되었고 이 값에는 0 이 할당된다.

useState의 인자는 state의 초기값으로 객체 뿐만 아니라 숫자, 문자 타입을 가질 수 있다.

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

위 코드와 같이 여러개의 상태를 선언할 수 있다.

이제 이 상태를 변경하고 싶으면 어떻게 하는가? 다시 위의 코드를 살펴보자

import React, { useState } from 'react';

function Example() {
  //count 라는 새 상태 변수를 선언한다.
  const [count, setCount] = useState(0);
 ... 
}
//여기서 count의 값을 1 증가시키고 싶다.
setCount(count+1)

상태 변수 count와 함께 선언해준 setCount를 이용해서 count의 값을 변경할 수 있다.
useState자체가 [상태 변수, 상태변수 갱신 함수]를 반환하기 때문에 구조분해할달에 의해서setCount가 상태 변수를 변경해주는 함수가 되는 것이다.

⚡️Effect Hook

Effect Hook은 함수 컴포넌트 내에서 side effects를 수행하게 해준다.

side effects : 컴포넌트 외부에서 로컬상태 값을 변경하는 것

Effect Hook을 간단하게 설명하자면

componentDidMount, componentDidUpdate, componentWillUnmount의 기능을 합친 것

이라고 이해하면 된다.

위 코드가 작성되어 있다고 가정하고 버튼을 클릭했을 시, setCount가 작동해서 count의 값이 한번 클릭할 때마다 1씩 증가한다고 가정해보자. 그렇다면 이제 count가 변경될 때 마다 그것을 화면에 표시해주고 싶다. 그렇다면 다음 코드를 컴포넌트내에 작성해주면 된다.

useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

기본적으로 Effect Hook은 처음 렌더링된 후와 매 업데이트 시 마다 수행된다. 때문에 위 코드에서 count값이 증가할 때 마다 변경된 값이 화면에 표시된다.

위 코드는 componentDidMount, componentDidUpdate를 실행한다. 하지만 아직 componentWillUnmount는 구현하지 못했다. Effect Hook에서는 다음과 같이 작성하면 된다.

useEffect(() => {
    ...
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return () => {
      // componentWillUnmount시 실행될 함수 작성; 
  });

위 코드와 같이 componentWillUnmount 기능은 useEffect에서 함수를 반환하게 해주고 그 함수안에 실행될 함수를 작성해주면 된다.

🖥 Hook 사용 규칙

• 최상위 컴포넌트에서만 Hook을 호출해야 한다. (반복문, 조건문, 재귀함수 내에 Hook 실행 X)
• React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.