훅(hook)

 

훅은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수.

 

훅은 클래스안에서 동작하지 않음.

 

대신 클래스 없이 리액트를 사용할 수 있게 해주는 것

useState 시작

import React, { useState } from 'react';

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

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

 

useState는 인자로 초기값을 하나 받는다.

 

카운트가 0부터 시작하기 때문에 초기값으로 0을 넣어준 것이다.

 

초기값은 딱 첫 번째 렌더링에서만 딱 한번 사용된다.

 

여러 state 변수 선언하기

 하나의 컴포넌트 내에서 state hook을 여러개 사용할 수 있다.

 

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

 

배열 구조 분해(destructing) 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다.