[React] Hooks 실습

import React, { useState } from "react";
// 카운트 기능
function useCounter(initialValue) {
    const [count, setCount] = useState(initialValue);

    const increaseCount = () => setCount((count) => count + 1);
    const decreaseCount = () => setCount((count) => Math.max(count -1, 0));

    return [count, increaseCount, decreaseCount];
}

export default useCounter;

우선 버튼을 누르면 카운트가 바뀌는 커스텀 훅을 작성한다. useState() 는 현재 카운트의 상태를 생성 및 업데이트 해주는 역할을 한다.

 

 

 

import React, { useState, useEffect } from "react";
import useCounter from "./useCounter";

const MAX_CAPACITY = 10;

function Accommodate(props) {
    const [isFull, setIsFull] = useState(false);
    const [count, increaseCount, decreaseCount] = useCounter(0);

    // 의존성 배열 없음 (마운트 된 직후 호출, 컴포넌트 업데이트 때마다 호출)
    useEffect(() => {
        console.log("=====================");
        console.log("useEffect() is called");
        console.log(`isFull: ${isFull}`);
    });

    // 의존성 배열 있음 (마운트 된 직후 호출, 카운트 값이 바뀔때 마다 호출)
    useEffect(() => {
        setIsFull(count >= MAX_CAPACITY);
        console.log(`Current count value: ${count}`);
    }, [count]);

    return (
        <div style={{ padding: 16 }}>
            <p>{`총 ${count}명 수용했습니다.`}</p>

            <button onClick={increaseCount} disabled={isFull}>
                입장
            </button>
            <button onClick={decreaseCount}>퇴장</button>

            {isFull && <p style={{ color : "red" }}> 정원이 가득찼습니다.</p>}
        </div>
    );
}

export default Accommodate;

useEffect()를 이용해보았다. 의존성 배열 있는것과 없는 것을 비교하기 위해 다음과 같이 작성하였다.

 

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Accommodate from './chapter_07/Accommodate';


ReactDOM.render(
  <React.StrictMode>
  <Accommodate />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

인덱스에서 렌더링하는거 잊지 말고...

 

 

 

맨 처음에 콘솔창을 열어보면 컴포넌트가 생성되고, 카운트값의 초기값이 생성되었기에 두개의 useEffect() 훅이 마운트 된 직후에 호출된 걸 확인할 수 있다. 그리고 입장 버튼을 누르면, 컴포넌트가 업데이트되고, 카운트 값도 변경되니, 이 역시 두개의 useEffect() 훅이 호출된다.

 

 

 

 

그러나 정원이 꽉 차게 된다면, 일단 두개의 훅이 호출되는데, 그 후 또 하나의 useEffect() 훅이 호출된다. 이는 정원이 꽉 차게 되어 isFull의 상태가 변하기 때문에 컴포넌트가 업데이트 되어, 정원이 꽉 차게 되었다는 걸 알리는 useEffect() 훅이 호출된다. 하지만 count라는 의존성 배열이 있는 useEffect() 훅은 카운트 값의 변화가 없기 때문에 호출되지 않는다.

 

 

 

 

 

퇴장 버튼을 0이 될 때까지 누르고, 0이 되어서 계속 퇴장버튼을 눌러도 두개의 useEffect 훅 모두 호출되지 않는다. 의존성 배열인 count의 값이 변하는 것도 아니고, isFull의 상태 역시 변하는 것이 아니기 때문에 컴포넌트가 업데이트 되지 않기 때문이다.