Hook

Hook이란? Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!

​

언제 Hook을 사용할까? 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.

 

import React, { useState } from 'react';

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

  return (
   <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
   </div>
  );
}

클래스로 호출할 경우 constructor를 만들어야하지만, Hook을 이용할 경우 “배열 구조 분해”형식으로 count에는 this.state.count가, setCount에는 this.setState()가 들어간다. useState(0)은 count=0이 들어가는 것이다.

 

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

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

 

팁: 여러 개의 state 변수를 사용하기

​

[something, setSomething]의 쌍처럼 state 변수를 선언하는 것은 유용합니다. 왜냐하면 여러 개의 변수를 선언할 때 각각 다른 이름을 줄 수 있기 때문입니다.

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