>웹 프론트엔드 >JS 튜토리얼 >{useState} HookK { 간략하게 설명됨};

{useState} HookK { 간략하게 설명됨};

PHPz
PHPz원래의
2024-09-10 11:30:14314검색

{useState} HooK { Briefly Explained};

useState는 두 가지 변수(state, setState)가 포함된 배열을 반환하여 구성 요소에 상태를 추가할 수 있는 React 후크입니다. 현재 상태와 호출 시 setter 함수가 되는 함수입니다. 문자열, 숫자, 부울, 배열 또는 개체와 같이 응용 프로그램에서 추적해야 하는 데이터나 속성을 추적하는 데 사용할 수 있습니다.
예:

const [state, setState] = useState();

간단히 말하면 상태는 언제든지 변경되며 업데이트가 필요하므로 'setState'는 상태를 업데이트하여 시간이 지남에 따라 구성 요소를 다시 렌더링하도록 합니다.

또한 useState는 객체를 포함한 모든 종류의 Javascript 값을 보유할 수 있습니다. 항상 명심해야 할 점은 React 상태에 있는 객체를 직접 변경해서는 안 된다는 것입니다. 먼저 새 복사본을 만들거나 기존 복사본을 만든 다음 State를 새 복사본으로 설정해야 합니다. 예:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

React 구성 요소에서 useState를 사용하려면 먼저 두 가지 방법으로 구성 요소 페이지 상단에 다음 코드를 작성하여 React에서 이를 가져와야 합니다. 둘 다 작동합니다. 완벽하게 독을 선택할 수 있습니다.

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

또는 한줄로 작성하셔도 됩니다

import React, {useState} from 'react';

React Hook useState는 구성 요소의 최상위 수준이나 사용자 정의 후크 내에서 호출할 수 있지만 루프나 조건 내부에서는 호출할 수 없습니다.

const [initialState, setInitialState] = useState();

initialState는 초기 렌더링 중에만 사용되며 후속 렌더링에서는 무시됩니다.

위 내용은 {useState} HookK { 간략하게 설명됨};의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.