React useState 후크 이해

반응useState 후크가 무엇인지 이해하기 전에 먼저 후크가 무엇인지 알아보겠습니다.

훅이란 무엇입니까?
후크는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해주는 반응 기능입니다. React 후크는 기능적 구성 요소에서만 사용할 수 있습니다.
useState 후크란 무엇입니까?
useState는 구성 요소에 상태 변수를 추가하는 데 사용되는 반응 후크입니다. 이는 이제 기능적 구성 요소에 상태 변수를 선언할 수 있음을 의미합니다.

선언 구문useState 후크

const [state, setState] = useState('Initial Value');

useState 후크를 사용하는 위치
예를 들어 간단히 이해해 봅시다. 햄버거 메뉴를 작업 중이라고 가정해 보겠습니다.

import React from 'react';

export const MyComponent = () => {
    // BAD ❌ - this way it won't work, We need to use useState hook in such situation
    let openHamburger = false;

    const toggle = () => {
        openHamburger = !openHamburger;
    }

    return (
        // ...
    )
}

변수의 값을 변경하고 나서 사용하고 싶을 때마다 useState 후크를 사용해야 합니다.

import React, { useState } from 'react';

export const MyComponent = () => {
    // GOOD ✅
    const [openHamburger, setOpenHamburger] = useState(false);

    const toggle = () => {
        setOpenHamburger(!openHamburger);
    }

    return (
        // ...
    )
}

useState 후크는 어디에 사용할 수 있습니까?

useState 후크는 클래스 구성 요소가 아닌 기능적 구성 요소에서만 사용할 수 있습니다.

변수의 값을 변경한 다음 해당 값을 사용하려고 합니다.

구성 요소가 실행될 때마다 useState 후크도 작성된 순서대로 정확하게 실행됩니다.

if 문이나 함수 또는 루프 내부에 후크를 넣을 수 없으며 어떤 항목에도 중첩되어서는 안 됩니다. 기능 구성 요소의 최상위 수준에 있어야 합니다.

useState 후크를 사용하는 방법?

useState 후크는 항상 두 개의 값이 있는 배열을 반환합니다. 첫 번째는 상태이고 두 번째 값은 함수입니다.

useState 반환 함수는 상태를 변경하는 데 사용됩니다.

useState 의 업데이트 함수를 호출할 때마다 업데이트된 상태 값으로 구성 요소를 다시 렌더링합니다.

새 값을 만들기 위해 이전 값을 사용해야 할 때마다 상태 설정 기능 버전을 사용해야 합니다.

const [count, setCount] = useState(6);

const inc = () => {
  setCount(prevCount => prevCount + 1); // setCount(6 => 6 + 1)
}

useState 함수를 전달하여 다른 방식으로 사용할 수도 있습니다. 그리고 이것은 구성 요소가 처음으로 렌더링될 때 한 번만 실행됩니다.

const [state, setState] = useState(()=> 6); // by doing this way, whenever we update the state value, the component will not re-renders.

이 블로그가 useState 후크를 이해하는 데 도움이 되기를 바랍니다.