[React] Hook (day16)

DanStudio!·2022년 8월 15일

React

목록 보기

5/7

Hook

그리고...

리엑트 훅에대해 알아보자.

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고 대신 class 없이 React를 사용할 수 있게 해주는 것이다.
React는 useState 같은 내장 Hook을 몇 가지 제공하며 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직접 만드는 것도 가능하다.

Hook 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.

최상위(at the top level)에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.

import React, { useState } from 'react'
function Counter () {
  // ① OK
  const [value, setValue] = useState(0)

  // ② 반복문 X
  for (let i = 0; i < 10; i++) {
    var [value, setValue] = useState(0)
  }

  // ③ 조건문 X
  if (x<10) {
    var [value, setValue] = useState(0)
  }

  // ④ 중첩된 함수 X
  function inner () {
    const [value, setValue] = useState(0)
  }
  ...
}

React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출할수 없다.

한 컴포넌트에서 State나 Effect Hook을 여러 개 사용할 수도 있습니다.

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Daniel');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Drinkwater');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}