React의 UseState 및 UseEffect 후크

React에서 useState와 useEffect는 기능적 구성요소의 상태를 관리하고 부작용을 처리하는 데 사용되는 두 가지 기본 후크입니다.

1. useState 후크

useState 후크를 사용하면 기능적 구성 요소에 상태를 추가할 수 있습니다. 두 요소가 포함된 배열을 반환합니다.

1. 현재 상태 값입니다.
2. 해당 상태 값을 업데이트하는 함수

예:

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

이 예에서는:

• useState(0)는 count 상태 변수를 0 값으로 초기화합니다.
• setCount는 버튼을 클릭할 때 상태를 업데이트하는 데 사용됩니다.

2. useEffect Hook

useEffect 후크를 사용하면 구성 요소에서 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용을 수행할 수 있습니다. 두 가지 인수가 필요합니다:

1. 사이드 이펙트 로직을 담은 함수
2. 효과 실행 시기를 결정하는 선택적 종속성 배열입니다.

예:

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

function Example() {
  const [count, setCount] = useState(0);

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Example;

이 예에서는:

• useEffect는 개수가 변경될 때마다 문서 제목을 업데이트합니다.
• 카운트가 종속성 배열에 포함되어 있으므로 카운트가 변경되면 렌더링할 때마다 효과가 실행됩니다.
• 선택적 정리 기능은 효과가 다시 실행되기 전이나 구성요소가 마운트 해제될 때 실행되며, 이는 구독 또는 타이머를 정리하는 데 유용합니다.

두 후크 모두 기능적 구성 요소의 상태와 부작용을 효과적으로 관리하는 데 도움이 되어 React 개발을 더욱 간결하고 강력하게 만듭니다.
.
.
.

요약하자면....
.
.
.

다음은 React의 useState 및 useEffect 후크에 대한 요약입니다.

useState 후크

• 목적: 기능적 구성 요소의 상태를 관리합니다.
• 구문: const [state, setState] = useState(initialValue);
• 매개변수:
  • initialValue: 초기 상태 값입니다.
• 반품:
  • 두 요소가 있는 배열:
  • 상태: 현재 상태 값
  • setState: 상태를 업데이트하는 함수

사용 예:

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

useEffect 후크

• 목적: 데이터 가져오기, 구독 또는 수동 DOM 업데이트와 같은 기능 구성 요소의 부작용을 처리합니다.
• 구문: useEffect(() => { /* 효과 로직 */ }, [종속성]);
• 매개변수:
  • 효과 함수: 부작용으로 실행할 코드가 포함되어 있습니다.
  • 종속성 배열(선택 사항): 변경 시 효과를 트리거하는 종속성 목록입니다. 비어 있으면 효과는 초기 렌더링 후 한 번만 실행됩니다. 생략하면 매 렌더링 후에 효과가 실행됩니다.
• 정리 기능(선택): 리소스를 정리하기 위해 효과 함수에서 반환된 함수입니다.

사용 예:

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

핵심 사항:

• useState는 기능 구성요소의 상태 관리를 단순화합니다.
• useEffect는 부작용을 처리하고 선택적으로 자체적으로 정리할 수 있습니다.
• 두 후크 모두 함께 작동하여 React에서 동적이며 상태가 유지되는 기능적 구성 요소를 생성합니다.

위 내용은 React의 UseState 및 UseEffect 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!