[React] Hook

Function Component와 Class Component 비교

Function Component	Class Component
state 사용불가	생성자에서 state를 정의
Lifecycle에 따른 기능구현 불가	setState() 함수를 통해 state 업데이트
Hooks	Lifecycle methods 제공

 

1. useState

- state를 사용하기 위한 Hook

// useState 사용법
const [변수명, set함수명] = useState(초기값);

 

예제

import React, { useState } from "react";

function Counter(props) {
    const [count, setCount] = useState(0); // 변수 각각에 대한 set함수가 따로 존재
    
    return(
        <div>
            <p>총 {count}번 클릭했습니다. </p>
            <button onClick={() => setCount(count + 1)}>
                클릭
            </button>
        </div>
    );
}

 

2. useEffect

- Side effect를 수행하기 위한 Hook

- Lifecycle와 동일한 역할

 

// 사용법
useEffect(이펙트 함수, 의존성 배열);

// Effect 함수가 mount, unmount시에 한번씩만 실행되려면
useEffect(이펙트 함수, []);

// 의존성 배열 생략가능 -> 컴포넌트가 업데이트 될 때마다 호출됨
useEffect(이펙트 함수);

 

예제

import React, { useState } from "react";

function Counter(props) {
    const [count, setCount] = useState(0); // 변수 각각에 대한 set함수가 따로 존재
    
    // componentDidMount, componentDidUpdate 와 비슷하게 작동
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });
    
    return(
        <div>
            <p>총 {count}번 클릭했습니다. </p>
            <button onClick={() => setCount(count + 1)}>
                클릭
            </button>
        </div>
    );
}