[React] Hooks - useState(), useEffect()

 

✔  Hooks

Function Component 는 Class Component 와 다르게 코드도 간결하고, 별도로 state 를 정의해서 사용하거나 Component 의 생명주기에 맞춰 코드가 실행되도록 할 수 없었다.

 

따라서 Function Component 에 이러한 기능을 지원하기 위해서 나온 것이 Hooks 이다. 

 

 

① useState()

 : 가장 많이 사용하는 Hook 으로, state 를 사용하기 위한 Hook

import React, { useState } from "react";

function Counter(props) {
	var count = 0;
    
    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => count++}>
            	클릭
            </button>
        </div>
    );
}

위의 예시처럼 count 를 함수의 변수로 사용하게 되면 버튼 클릭 시 count 를 증가시킬 수는 있지만, 재렌더링이 일어나지 않아 새로운 count 값이 화면에 출력되지 않게 된다.

 

따라서 이런 경우에는 state 를 사용해서 값이 바뀔 때 마다 재렌더링이 되도록 해야하는데, Function Component 에는 이러한 기능이 없기 때문에 useState 를 사용하여 update 해야 한다.

 

• useState() 사용법

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

import React, { useState } from "react";

function Counter(props) {
	const [count, setCount] = userState(0);
    
    return (
        <div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onclick={() => setCount(count + 1)}>
            	클릭
            </button>
        </div>
    );
}

Class Component 에서는 setState 함수 하나를 사용해서 모든 state 값을 업데이트할 수 있었지만, useState 를 사용하는 방법에서는 변수 각각에 대해 set 함수가 따로 존재한다.

 

 

② userEffect()

 : side effect 를 수행하기 위한 Hook 으로, 다른 component 에 영향을 미칠 수 있으며, react 의 함수 component 에서 side effect 를 실행할 수 있게 해주는 Hook 이다.

 

• useEffect() 사용법

useEffect(이펙트 함수, 의존성 배열);

의존성 배열은 이펙트가 의존하고 있는 배열인데, 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 이펙트 함수가 실행된다. 기본적으로 이펙트 함수는 처음 컴포넌트가 렌더링 된 이후와 업데이트로 인한 재렌더링 이후에 실행된다.

useEffect(이펙트 함수, []);

만약 Effect function 이 mount, unmount 시에 단 한 번씩만 실행되게 하고싶으면, 위와 같이 의존성배열에 빈 배열을 넣으면 된다.

useEffect(이펙트 함수);

의존성 배열을 생략하면 컴포넌트가 업데이트 될 때마다 호출된다.

import React, { useState, useEffect } from "react";

function Counter(props) {
    const [count, setCount] = useState(0);
    
    // componentDidMount, componentDidUpdate 와 비슷하게 작동한다.
    useEffect(() => {
    	// 브라우저 API 를 사용해서 document 의 title 을 업데이트 한다.
        document.title = `You clicked ${count} times`;
    });
    
    return (
    	<div>
            <p>총 {count}번 클릭했습니다.</p>
            <button onClick={() => setCount(count + 1)}>
            	클릭
            </button>
        </div>
    );
}

 

import React, { useState, useEffect } from "react";

fuction UserStatus(props) {
    const [isOnline, setIsOnline] = useState(null);
    
    function handleStatusChange(status) {
    	setIsOnline(status.isOnline);
    }
    
    useEffect(() => {
    	ServerAPI.sebscribeUserStatus(props.user.id, handleStatusChange);
        
        // 컴포넌트가 unmount 될 때 호출됨
        return () => {
            ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
        };
    });
    
    if (isOnline === null) {
    	return '대기 중...';
    }
    return isOnline ? '온라인' : '오프라인';
}

위 코드는 componentWillUnmount 와 동일한 기능을 useEffect 로 표현한 것이다. 이 코드는 useEffect 에서 ServerAPI 를 사용하여 사용자의 상태를 구독한다.

 

이 후 함수를 하나 return 하는데 해당 함수에는 구독을 해지하는 API 를 호출한다.

 

useEffect(() => {
    // 컴포넌트가 마운트 된 이후,
    // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
    // 의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행됨
    // 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
    ...
    
    return () => {
    	// 컴포넌트가 마운트 해제되기 전에 실행됨
        ...
    }
}, [의존성 변수1, 의존성 변수2, ...]);