React Hook

React 버전 16.8부터 새롭게 추가된 기능으로, Hook을 이용하면 클래스 컴포넌트를 작성할 필요 없이 state와 같은 여러 React 기능을 사용할 수 있다.

• Hook은 함수 컴포넌트에서 React state를 사용할 수 있게 해주는 특별한 함수이다.
• Hook은 클래스 컴포넌트 내에서는 동작하지 않는다. 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

Hook의 개요 (공식 문서)

Hook 규칙

1. 최상위에서만 Hook을 호출해야 한다.
반복문이나 조건문, 또는 중첩된 함수 내에서 Hook을 호출하면 안된다.

2. 오직 React 함수 내에서 Hook을 호출해야 한다.
일반적인 JavaScript 함수에서 Hook을 호출하면 안된다.
Hook은 React의 함수형 컴포넌트 내에서 사용되도록 만들어진 메소드이다.

Hook 규칙

State Hook

: 함수 컴포넌트에서 컴포넌트 내부에서 변화하는 값을 state로 정해서 사용할 수 있으며, 이 state는 컴포넌트가 리렌더링되어도 그대로 유지된다.

State Hook을 이용하기 위해서는 React에서 useState를 불러와야 한다.

import { useState } from "react";

useState()

• useState()를 호출하는 것은 state 변수를 선언하는 것이다.
  일반적인 변수는 함수가 종료되면 사라지지만, state 변수는 함수가 종료되어도 React에 의해 사라지지 않는다.
• useState() Hook의 인자로 state 초기 값을 넘겨줘야 한다. ex) 0, [], false ...

const [state 저장 변수, state 갱신 함수] = useState(state 초기 값);

• useState는 state 변수와, 해당 변수를 갱신할 수 있는 함수를 반환한다.
  (구조 분해 할당 문법을 이용해 useState로 호출된 이 변수들을 다른 변수명으로 할당하는 것이다.)

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);
}

배열 구조 분해

const [fruit, setFruit] = useState('banana');

구조 분해 할당 문법을 이용한 위의 코드를 풀어서 쓰면 아래와 같다.

const fruitStateVariable = useState('banana'); // 두 개의 아이템을 반환
const fruit = fruitStateVariable[0]; // 첫 번째 아이템
const setFruit = fruitStateVariable[1]; // 두 번째 아이템

➡️ 0이나 1로 배열에 접근하는 것보다, 구조 분해 할당으로 변수 이름을 정해주는 것이 더 가독성이 좋다.

state가 갱신되는 과정

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

1. 사용자가 체크박스 값을 변경하면 onChange 이벤트가 handleChecked 함수를 호출한다.
2. 이 함수가 setIsChecked 함수를 호출하고, 호출된 결과에 따라 isChecked 변수가 갱신된다.
3. React는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 리렌더링 한다.

주의할 점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링된다.
• React state는 상태 변경 함수setState() 호출로 변경해야한다.

이 글은 아래 링크를 참고하여 작성한 글입니다.
https://ko.reactjs.org/docs/getting-started.html