React의 useState 후크는 무엇입니까

useState Hook in React - useState Hook in react 상태 관리에 대한 완벽한 가이드입니다.

useState 후크란 무엇입니까?

반응 상태의 개념에 이미 익숙합니다(아니요, 이 시리즈를 참조하세요).

이전에는 클래스 기반 구성 요소에서만 상태 변수를 선언할 수 있었습니다. useState 후크를 사용하면 함수 구성 요소에서 상태를 사용할 수 있습니다.

setState() 호출은 무엇을 합니까?

간단히 말해서 "상태 변수"를 선언합니다.
통사론:

import React. { useState } from 'react'; 

const App = () => {
    // Declare a new state variable, which we'll call "apples"
    const [apples. setApples] = useState(0); 

    // Other codes...
}

useState Hook에 전달되는 인수(이 경우 "0")는 초기 상태입니다. 이것은 본질적으로 apples = 0을 의미합니다. setApples는 apples의 값을 변경하는 데 사용할 수 있는 함수입니다.

여기서 무슨 일이 일어나고 있습니까?

useState를 호출할 때마다 정확히 두 개의 요소가 있는 배열을 반환합니다. 첫 번째는 상태 변수이고 두 번째는 상태 변수를 업데이트하는 기능입니다. 따라서 다음과 같이 작성할 수도 있습니다.

1 const apples = useState(0); 

이 경우 사과는 정확히 두 개의 요소가 있는 배열입니다. store 변수를 apples [0]으로 액세스하고 apples [0]을 업데이트하는 함수와 apples [0]을 apples [1]로 업데이트하는 함수에 액세스할 수 있습니다. useState는 항상 정확히 두 개의 요소를 반환한다는 것을 알고 있으므로 배열 구조 분해를 사용하여 다음을 얻을 수 있습니다.

1 const [apples, setApples] = useState(0); 

두 번째 요소의 이름을 setApples로 지정할 필요는 없습니다. 우리는 그것을 우리가 원하는 대로 부를 수 있습니다. 그러나 관례는 코드를 훨씬 읽기 쉽게 만들기 위해 이름을 지정하는 것입니다.

그런데 상태 변수를 업데이트하는 함수가 왜 필요한가요?

바닐라 JavaScript에서는 다음과 같이 변수를 업데이트할 수 있습니다.

let apples = 0; 
apples - apples + 1; 

그러나 이것은 React에서 허용되지 않습니다. 반응에서 apples 변수(또는 다른 상태 변수)를 업데이트하고 싶을 때마다 setApples(또는 이름이 무엇이든) 함수를 호출해야 합니다.

상태 변수를 업데이트하는 방법은 무엇입니까?

이 예를 보자

import React, { useState } from "react"; 

const App = () => {
    // Declare the state variable 
    const [apples, setApples] = useState(0); 
    //Function to handle the update
    const appleHandler = () => {
        const appleHandler = () => {
            setApples(apples + 1); //Update the number of apples
        }

        return (
            <div>
             {/*Display the number of apples*/}
             <p>{apples} Apples</p>
             <button>onClick={appleHandler}> Increase Apples</button>
            </div> 
        ); 
        //Button
    }; 
}; 

export default App; 

여기에서 버튼(16행)을 사용하여 appleHandler(원하는 이름을 지정할 수 있음) 함수의 참조를 호출하고 있으며, 이 함수는 사과 값을 업데이트하기 위해 setApples 함수를 호출합니다.

onClick 이벤트는 appleHandler 함수의 참조만 호출합니다. 괄호(예: appleHandler() )를 사용할 수 없으며 setApples를 사용하여 상태를 직접 업데이트할 수 없습니다. DOM이 렌더링되는 즉시 함수가 실행되고 코드가 무한 루프로 전송되기 때문입니다. 버튼을 클릭했을 때만 appleHandler를 실행하려고 합니다. 다음과 같이 익명 함수를 사용하여 이를 수행할 수도 있습니다.

<button onClick={() => setApples(apples + 1)}>Increase Apples </button>

이전 예제의 16행은 위의 코드로 대체할 수 있으며 동일하게 작동합니다. 그러나 핸들러 함수를 사용하여 상태를 변경하는 것이 좋습니다.



귀하의 지원을 보여주십시오.




💻 읽어주셔서 감사합니다 | 행복한 코딩 🥂