React Hook에 대하여(1)

React Hook은 리액트 버전 16.8 이후부터 요소로 새로 추가 되었다.

Hook을 이용하면 기존의 클래스 기반으로 코드를 작성할 필요가 없으면서 상태를 관리 할 수 있게하여주며, 이는 함수형 컴포넌트로써 완벽히 작성하여 동작 할 수 있다.

 

우선 기본적인 예제 코드를 확인하여 보자.<리액트 공식 Hook의 개요에서 발췌>

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이다. 이 함수는 Hook에서 배울 수 있는 가장 기초이자 상태 관리의 시작이 되는 함수라고 할 수 있다.

 

코드를 살펴본다면 jsx 엘리먼트 내부에서 발생하는 onClick 이벤트 핸들러를 통하여 setCount를 호출하고 매개변수로 count+1을 전달한다.

 

이 의미는 바로 useState 함수를 처음 선언 할 때 배열 구조 분해 할당을 통하여 첫번째 인수는 현재의 상태값, 두번째 인수는 상태 값을 초기화하는 함수의 이름을 지정해주는 것이다.

 

그러므로 setCount(count+1)을 호출하였다는 것은, count 값을 기존의 상태 값에 +1을 하여 새로이 초기화 하겠다는 의미이다.

 

또한 useState는 클래스 컴포넌트의 this.state와는 다르게 객체일 필요는 없다.

 

 

function ExampleWithManyStates() {

    // 상태 변수를 여러 개 선언했습니다!

    const [age, setAge] = useState(42);

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

    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

    /  / ...

}

또한, 이 예제 코드에서 볼 수 있듯이 함수형 컴포넌트 내부에서 여러개의 useState를 선언하여도 문제가 없다.

 

이러한 Hook은 Class 컴포넌트에서는 동작하지 않지만, Functional 컴포넌트에서 State와 생명주기를 연동 할 수 있게 하여주는 함수다.

 

이러한 Hook의 종류는 여러가지가 있으며, 천천히 하나씩 포스팅 하도록 하겠다.