[React] 리액트 Hook의 기본 useState & useEffect

React Hooks

• 리액트 훅(Hooks)은 함수형 컴포넌트를 작성해도 기존의 클래스형 컴포넌트만이 가졌던 장점을 활용할 수 있게 해주는 리액트 기능을 일컫는 단어다.
• 총 10개의 훅이 기본적으로 제공되며, 필요에 따라 Custom Hook을 작성해서 사용할 수도 있다.
• 훅은 오직 리액트 함수 내에서, 최상위(Top-level)에서만 호출되어야 하는 특징을 가지고 있다.
• 10개의 Built-In 훅 중 useState와 useEffect가 가장 많이 사용되며, 훅을 이해하는 데 가장 기본이 되어준다.
• 훅을 사용하기 위해서는 컴포넌트 파일 상단에 import { Hook } from 'react'를 해주면 된다.

1. useState

useState는 컴포넌트에서 바뀌는 값을 관리하고 변경사항에 맞춰 UI를 재렌더링 하는 훅이다. 기본 값을 인자로 입력해주면 useState가 하나의 Array를 반환한다. 해당 배열에는 두 개의 값이 있는데, 첫째는 선언한 state값, 둘째는 state를 변경할 수 있는 setter 함수이다. 고로 두 개의 값을 받아 사용하기 위해 Array Destructuring 문법을 사용해서 선언한다. 두 값의 네이밍의 경우 state는 state명 그대로, setter 함수는 set + State명 형태로 받는 것이 일반적이다.

💡Example:

세 개의 버튼이 있고, 각 버튼은 클릭 이벤트가 발생하면 type state를 변경하는 역할을 한다. State가 변경되면 useState 훅으로 인해 재렌더링이 발생하기 때문에 새로운 type내용이 화면에 바로 반영되는 것을 확인할 수 있다.

2. useEffect

useEffect는 컴포넌트나 state에 변화가 생겼을 때 특정 작업을 실행할 수 있도록 하는 훅이다. useEffect는 두 개의 인자를 받는데, 첫 번째는 변경시 호출할 콜백 함수, 두 번째는 상태 변경을 감지할 state들을 담아둔 배열Dependency Array을 받는다. 즉, 배열에 포함되어 있는 state에 변화가 일어나면 첫 번째 인자로 받는 콜백 함수를 호출하는 메커니즘이라고 볼 수 있다.

만약 배열을 빈 상태로 입력하면 컴포넌트가 마운트될 때만 콜백 함수를 호출한다.

💡Example:

예제의 경우 두 번째 인자로 type만 있는 Dependency Array를 입력 받았다. 즉 type state가 변경될 때만 API를 받아오는 함수가 실행되는 것이다. 또한, 예제에서는 fetch 해오는 URL 주소 뒤에 URL 뒤에 /${type}를 추가해서 함수가 호출될 때마다 변경된 type state를 URL에 넣고 API를 받아오게 했다. 이후 함수가 실행된 후 받게 된 데이터를 가지고 items 라는 state를 업데이트 해준다. 이때 Dependency Array 안에 items는 포함되어 있지 않기 때문에, items state가 변경되어도 함수는 실행되지 않는다.

전체 코드

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

function App() {
    const [type, setType] = useState('posts');
    const [items, setItems] = useState([]);
    
    useEffect(() => {
        fetch(`https://jsonplaceholder.typicode.com/${type}`)
            .then(response => response.json())
            .then(json => {
                if (type === 'comments') setItems(json.map(el => el.body))
                else if (type === 'users') setItems(json.map(el => el.name))
                else if (type === 'posts') setItems(json.map(el => el.title))
            })
    }, [type]);

    return (
        <>
            <div>
                <button onClick={() => {setType('posts')}}>See Posts</button>
                <button onClick={() => {setType('users')}}>See Users</button>
                <button onClick={() => {setType('comments')}}>See Comments</button>
            </div>
            <h1>These are the {type}:</h1>
            {items.map(item => {
                return <p>{JSON.stringify(item)}</p>
            })}
        </>
    );
}

export default App;