State Hook 사용하기

안녕하세요! 이번에는 React 16.8 버전에서 새로 추가된 Hook에 대해서 알아보겠습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.

import React, { useState } from 'react';

const StateHook = () => {
    //새로운 State변수를 선언하고, count라 부르겠습니다.
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>당신은 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>
            날 눌러요!
            </button>
        </div>
    );
};

버튼을 클릭했을때 <p>태그 안의 숫자가 커지는 간단한 리액트 코드를 작성해 보았습니다.

Hook이란?

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, 이것을 count라 부르겠습니다.
  const [count, setCount] = useState(0);

여기서 useState가 바로 Hook 입니다. (이게 무슨 의미인지는 앞으로 알아보겠습니다 !)
Hook을 호출해 함수 컴포넌트 안에 state를 추가했습니다. 이 state는 컴포넌트가 다시 렌더링되어도 그대로 유지될 것입니다. useState는 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 제공합니다. 우리는 이 함수를 다른곳에서 호출 할 수 있습니다.

useState는 인자로 초기 state값을 하나 받습니다. count는 0부터 시작하기 때문에
예시에서 초기값으로 0을 넣어준 것입니다.

여러 state 변수 선언하기

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

function ExampleWirhManyState() {
    //--
    const [age, setAge] = useState(42)
    const [fruit, setFruit] = useState('apple')
    const [todos, setTodos] = useState([{text: 'Hook에 대해서 배우기!'}])
    //..
}

이것을 바로 배열 구조 분해 (destructuring)이라고 한다. useState로 호출된 state변수들을 다른 변수명으로 할당할 수 있게 해줍니다.