지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

React 기술 레벨 업: Hooks 이해 및 사용

DDD
풀어 주다： 2024-10-29 12:48:02
원래의
945명이 탐색했습니다.

Level Up Your React Skills: Understanding and Using Hooks

React 후크는 기능 구성 요소에서 상태 및 수명 주기 메서드와 같은 React 기능을 사용할 수 있게 해주는 특수 함수입니다. 이는 구성 요소 모델을 단순화하고 구성 요소 간에 상태 저장 논리를 더 쉽게 공유할 수 있도록 React 16.8에 도입되었습니다.

React Hooks의 주요 기능:

상태 관리: useState와 같은 후크를 사용하면 함수형 구성 요소를 클래스 구성 요소로 변환할 필요 없이 기능 구성 요소의 상태를 추가하고 관리할 수 있습니다.

부작용: useEffect 후크를 사용하면 클래스 구성 요소의 수명 주기 메서드와 유사하게 데이터 가져오기, 구독 또는 DOM 수동 변경과 같은 부작용을 수행할 수 있습니다.

재사용성: 사용자 정의 후크를 사용하면 다양한 구성 요소에서 상태 저장 논리를 캡슐화하고 재사용할 수 있습니다.

클리너 코드: 후크는 구성 요소를 잘 유지하는 데 도움이 됩니다

내장 후크

1 useState

  • 설명: 기능 구성 요소에 상태를 추가할 수 있습니다.
  • 예: 
   import React, { useState } from 'react';

   const Counter = () => {
     const [count, setCount] = useState(0);
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

2 효과 사용

  • 설명: 기능 구성 요소에서 데이터 가져오기 또는 구독과 같은 부작용을 관리합니다.
  • 예: 
   import React, { useEffect, useState } from 'react';

   const DataFetcher = () => {
     const [data, setData] = useState(null);
     useEffect(() => {
       fetch('https://api.example.com/data')
         .then(response => response.json())
         .then(setData);
     }, []);
     return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
   };
로그인 후 복사
로그인 후 복사

3 useContext

  • 설명: 소비자 없이도 컨텍스트 값에 대한 액세스를 제공합니다.
  • 예: 
   import React, { useContext } from 'react';

   const ThemeContext = React.createContext('light');

   const ThemedComponent = () => {
     const theme = useContext(ThemeContext);
     return <div className={`theme-${theme}`}>Current theme: {theme}</div>;
   };
로그인 후 복사
로그인 후 복사

4 리듀서 사용

  • 설명: Redux와 유사하게 구성 요소의 복잡한 상태 로직을 관리합니다.
  • 예: 
   import React, { useReducer } from 'react';

   const initialState = { count: 0 };
   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

   const Counter = () => {
     const [state, dispatch] = useReducer(reducer, initialState);
     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

5 메모 사용

  • 설명: 계산된 값을 메모하여 성능을 최적화하고 불필요한 재계산을 방지합니다.
  • 예: 
   import React, { useMemo, useState } from 'react';

   const ExpensiveComputation = ({ number }) => {
     const compute = (num) => {
       return num * 1000; // Simulate an expensive computation
     };
     const result = useMemo(() => compute(number), [number]);
     return <div>Computed Result: {result}</div>;
   };
로그인 후 복사
로그인 후 복사

6 콜백 사용

  • 설명: 종속성 중 하나가 변경된 경우에만 변경되는 콜백 함수의 메모화된 버전을 반환합니다.
  • 예: 
   import React, { useCallback, useState } from 'react';

   const Button = React.memo(({ onClick, children }) => {
     console.log('Button rendered');
     return <button onClick={onClick}>{children}</button>;
   });

   const App = () => {
     const [count, setCount] = useState(0);
     const increment = useCallback(() => setCount(c => c + 1), []);
     return (
       <div>
         <p>Count: {count}</p>
         <Button onClick={increment}>Increment</Button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

7 참조 사용

  • 설명: 구성 요소의 전체 수명 동안 지속되는 변경 가능한 참조 객체를 반환하며 DOM 요소에 직접 액세스하는 데 유용합니다.
  • 예: 
   import React, { useRef } from 'react';

   const FocusInput = () => {
     const inputRef = useRef(null);
     const focusInput = () => {
       inputRef.current.focus();
     };
     return (
       <div>
         <input ref={inputRef} type="text" />
         <button onClick={focusInput}>Focus Input</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

8 useLayoutEffect

  • 설명: useEffect와 유사하지만 모든 DOM 변형 후에 동기적으로 실행되므로 DOM 레이아웃을 측정할 수 있습니다.
  • 예: 
   import React, { useLayoutEffect, useRef } from 'react';

   const LayoutEffectExample = () => {
     const divRef = useRef();
     useLayoutEffect(() => {
       console.log('Height:', divRef.current.clientHeight);
     }, []);
     return <div ref={divRef}>This is a div</div>;
   };
로그인 후 복사
로그인 후 복사

9 ImperativeHandle 사용

  • 설명: 상위 컴포넌트에서 ref를 사용할 때 노출되는 인스턴스 값을 사용자 정의합니다.
  • 예: 
   import React, { useState } from 'react';

   const Counter = () => {
     const [count, setCount] = useState(0);
     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

10 useDebugValue
- 설명: 보다 쉬운 디버깅을 위해 React DevTools의 사용자 정의 후크에 대한 레이블을 표시합니다.
- 예:

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

   const DataFetcher = () => {
     const [data, setData] = useState(null);
     useEffect(() => {
       fetch('https://api.example.com/data')
         .then(response => response.json())
         .then(setData);
     }, []);
     return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
   };
로그인 후 복사
로그인 후 복사

맞춤형 후크

11 가져오기 사용
- 설명: API에서 데이터를 가져오기 위한 사용자 정의 후크
- 예:

   import React, { useContext } from 'react';

   const ThemeContext = React.createContext('light');

   const ThemedComponent = () => {
     const theme = useContext(ThemeContext);
     return <div className={`theme-${theme}`}>Current theme: {theme}</div>;
   };
로그인 후 복사
로그인 후 복사

12 LocalStorage 사용
- 설명: 상태를 로컬 저장소와 동기화하여 세션 전반에 걸쳐 데이터를 유지합니다.
- 예:

   import React, { useReducer } from 'react';

   const initialState = { count: 0 };
   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

   const Counter = () => {
     const [state, dispatch] = useReducer(reducer, initialState);
     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

13 이전 사용
- 설명: 상태나 속성의 이전 값을 반환합니다.
- 예:

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

   const ExpensiveComputation = ({ number }) => {
     const compute = (num) => {
       return num * 1000; // Simulate an expensive computation
     };
     const result = useMemo(() => compute(number), [number]);
     return <div>Computed Result: {result}</div>;
   };
로그인 후 복사
로그인 후 복사

14 Debounce 사용
- 설명: 값 또는 함수 호출을 디바운스하여 지정된 지연 이후까지 실행을 지연합니다.
- 예:

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

   const Button = React.memo(({ onClick, children }) => {
     console.log('Button rendered');
     return <button onClick={onClick}>{children}</button>;
   });

   const App = () => {
     const [count, setCount] = useState(0);
     const increment = useCallback(() => setCount(c => c + 1), []);
     return (
       <div>
         <p>Count: {count}</p>
         <Button onClick={increment}>Increment</Button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

15 useOnClickOutside
- 설명: 지정된 요소 외부의 클릭을 감지하여 팝업이나 드롭다운을 닫는 데 유용합니다.
- 예:

   import React, { useRef } from 'react';

   const FocusInput = () => {
     const inputRef = useRef(null);
     const focusInput = () => {
       inputRef.current.focus();
     };
     return (
       <div>
         <input ref={inputRef} type="text" />
         <button onClick={focusInput}>Focus Input</button>
       </div>
     );
   };
로그인 후 복사
로그인 후 복사

16 useInterval
- 설명: 지정된 간격으로 기능을 반복적으로 실행하는 간격을 설정합니다.
- 예:

   import React, { useLayoutEffect, useRef } from 'react';

   const LayoutEffectExample = () => {
     const divRef = useRef();
     useLayoutEffect(() => {
       console.log('Height:', divRef.current.clientHeight);
     }, []);
     return <div ref={divRef}>This is a div</div>;
   };
로그인 후 복사
로그인 후 복사

17 useTimeout
- 설명: 지정된 지연 후에 기능이 실행되도록 제한 시간을 설정합니다.
- 예:

   import React, { useImperativeHandle, forwardRef, useRef } from 'react';

   const CustomInput = forwardRef((props, ref) => {
     const inputRef = useRef();
     useImperativeHandle(ref, () => ({
       focus: () => {
         inputRef.current.focus();
       }
     }));
     return <input ref={inputRef} type="text" />;
   });

   const Parent = () => {
     const ref = useRef();
     return (
       <div>
         <CustomInput ref={ref} />
         <button onClick={() => ref.current.focus()}>Focus Input</button>
       </div>
     );
   };
로그인 후 복사

18 MediaQuery 사용
- 설명: 미디어 쿼리가 일치하는지 확인하여 반응형 디자인 로직을 허용합니다.
- 예:

import { useDebugValue } from 'react';

    const useCustomHook = (value) => {
      useDebugValue(value ? 'Value is true' : 'Value is false');
      return value;
    };

    const DebugExample = () => {
      const isTrue = useCustomHook(true);
      return <div>Check the React DevTools</div>;
    };
로그인 후 복사

19 useScrollPosition
- 설명: 현재 창의 스크롤 위치를 추적합니다.
- 예:

 import { useState, useEffect } from 'react';

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

      useEffect(() => {
        const fetchData = async () => {
          const response = await fetch(url);
          const result = await response.json();
          setData(result);
          setLoading(false);
        };
        fetchData();
      }, [url]);

      return { data, loading };
    };
로그인 후 복사

20 KeyPress 사용
- 설명: 특정 키가 눌렸는지 감지합니다.
- 예:

import { useState, useEffect } from 'react';

    const useLocalStorage = (key, initialValue) => {
      const [storedValue, setStoredValue] = useState(() => {
        try {
          const item = window.localStorage.getItem(key);
          return item ? JSON.parse(item) : initialValue;
        } catch (error) {
          console.error(error);
          return initialValue;
        }
      });

      useEffect(() => {
        try {
          window.localStorage.setItem(key, JSON.stringify(storedValue));
        } catch (error) {
          console.error(error);
        }
      }, [key, storedValue]);

      return [storedValue, setStoredValue];
    };
로그인 후 복사

요약

이제 이 목록에는 각 후크에 대한 설명이 포함되어 있어 후크의 목적과 사용 사례를 더욱 명확하게 이해할 수 있습니다. 더 자세한 내용이나 예시가 필요하시면 언제든지 문의해주세요!

위 내용은 React 기술 레벨 업: Hooks 이해 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：JavaScript에서 여러 변수 선언하기: 줄 구분과 쉼표 구분 중 어느 것이 더 낫나요? 다음 기사：Turf.js를 사용하여 특정 지오펜스에 있는 좌표 결정
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1992
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2156
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1820
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1713
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1734
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿