React Hooks 필수사항-JS 튜토리얼-php.cn

React Hooks Essentials

컨셉 하이라이트:

Hooks란 무엇인가요?
훅을 사용하는 이유
useState
useEffect
리듀서 사용
Ref 사용
맞춤형 후크
감정으로 전환
UseHooks.com이 무엇인가요?

1. Hooks란 무엇이며 그 이유는 무엇입니까?

React에서 후크는 클래스 구성 요소로 변환할 필요 없이 기능 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 특수 함수입니다. React 16.8에 도입된 후크를 사용하면 기능적 구성 요소 내에서 구성 요소 간의 논리를 더 쉽게 재사용하고, 상태 관리를 처리하고, 데이터 가져오기 또는 구독과 같은 부작용을 관리할 수 있습니다.

2. 왜 Hook을 사용하나요?

클리너 코드: 후크를 사용하면 기능적 구성 요소에서 직접 상태 및 부작용을 관리할 수 있으므로 구성 요소의 구조가 단순화됩니다.
재사용성: 사용자 정의 후크를 사용하면 코드를 복제하거나 구성 요소를 재구성하지 않고도 상태 저장 논리를 재사용할 수 있습니다.
기능적 구성요소: 후크를 사용하면 클래스 구성요소만큼 강력한 기능적 구성요소를 작성할 수 있어 보다 일관된 코드베이스를 얻을 수 있습니다.

3. 사용상태

useState 후크는 기능 구성요소의 상태를 관리하는 데 기본입니다. this.setState()와 함께 클래스 구성 요소를 사용하는 대신 이 후크를 사용하여 상태를 원활하게 관리할 수 있습니다.

구문:

const [state, setState] = useState(initialState);

로그인 후 복사

예) 이 예에서는 count를 0으로 초기화하고 버튼 클릭 시 setCount 함수를 사용하여 업데이트합니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

로그인 후 복사

4. 사용효과

useEffect 후크를 사용하면 데이터 가져오기, DOM 업데이트, 이벤트 구독과 같은 구성 요소의 부작용을 처리할 수 있습니다.

구문:

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);

로그인 후 복사

예) 이 예에서 useEffect는 구성 요소가 마운트될 때 API에서 데이터를 가져옵니다. 두 번째 인수로 빈 배열 []을 사용하면 효과가 한 번만 실행됩니다(예: componentDidMount).

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

로그인 후 복사

5. 감속기 사용

상태 로직이 더 복잡해지면 useState 대신 useReducer를 사용해 보세요. Redux와 유사하지만 구성 요소 수준입니다. 이를 사용하여 작업 유형에 따라 상태 전환을 관리할 수 있습니다.

구문:

const [state, dispatch] = useReducer(reducer, initialState);

로그인 후 복사

예) 이 예에서 useReducer는 증가와 감소라는 두 가지 작업을 처리합니다. 디스패치를 사용하여 이러한 작업을 기반으로 상태 업데이트를 트리거합니다.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

로그인 후 복사

6. 참조 사용

useRef 후크는 DOM 요소에 직접 액세스 및 조작하거나 재렌더링을 유발하지 않고 렌더 전반에 걸쳐 변경 가능한 값을 저장할 수 있는 방법을 제공합니다.

구문:

const myRef = useRef(initialValue);

로그인 후 복사

예) 이 예에서 useRef를 사용하면 입력 필드에 직접 액세스할 수 있으므로 버튼을 클릭할 때 프로그래밍 방식으로 초점을 맞출 수 있습니다.

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

로그인 후 복사

7. 맞춤형 후크

후크의 강력한 측면 중 하나는 사용자 정의 후크를 만들어 구성 요소 전체에서 논리를 캡슐화하고 재사용할 수 있다는 것입니다. 사용자 정의 후크는 사용부터 시작되며 다른 후크를 사용할 수 있는 일반 JavaScript 함수입니다.

예) 이 예에서 useFetch 후크는 데이터 가져오기 로직을 처리하며 여러 구성 요소에서 재사용할 수 있습니다.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}

로그인 후 복사

8. 파견으로 전환

디스패치 메소드를 useReducer와 함께 사용하여 토글 상태를 생성할 수 있습니다. 이는 모달, 드롭다운 또는 토글 테마와 같은 구성요소를 처리하는 데 유용합니다.

예) 디스패치 메소드의 토글 액션은 isVisible 상태를 true와 false 사이에서 전환하여 콘텐츠의 가시성을 토글합니다.

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

function ToggleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}

로그인 후 복사