VUE3.0을 빠르게 시작하는 방법: Enter Learning
Hooks는 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용하는 데 사용됩니다. 그렇다면 Hook이 정확히 무엇인지, 왜 Hook을 사용해야 하는지, React가 제공하는 일반적인 Hook는 무엇인지, Hook를 사용자 정의하는 방법은 다음과 같습니다.
후크는 후크로 번역됩니다. 후크는 외부 기능에 연결하는 기능을 담당하는 함수입니다.
React는 몇 가지 일반적인 후크를 제공하며, React는 사용자 정의 후크도 지원합니다. 이러한 후크는 함수에 외부 기능을 도입하는 데 사용됩니다.
컴포넌트에 외부 기능을 도입해야 하는 경우 React에서 제공하는 후크를 사용하거나 후크를 사용자 정의할 수 있습니다.
예를 들어 컴포넌트에 상태 관리 기능을 도입한다면 useState 함수를 사용할 수 있습니다. useState의 사용법은 아래에서 자세히 소개하겠습니다.
후크를 사용하는후크를 사용하는 두 가지 주요 이유는
Hooks가 등장하기 전에 React는 로직 재사용을 달성하기 위해 상위 구성 요소 및 렌더링 소품과 같은 복잡한 디자인 패턴을 빌려야 했습니다. 그러나 상위 구성 요소는 중복 구성 요소 노드를 생성하므로 디버깅이 더 복잡해졌습니다.
후크를 사용하면 구성 요소 구조를 수정하지 않고도 상태 로직을 재사용할 수 있습니다. 사용자 정의 후크의 사용법은 아래에서 자세히 소개됩니다.
클래스 컴포넌트에서는 동일한 비즈니스 로직에 대한 코드가 컴포넌트의 다양한 라이프사이클 기능에 분산되어 있으며 Hooks는 동일한 비즈니스 로직에 대한 코드를 함께 통합하여 비즈니스 로직을 통합할 수 있습니다. 명확하게 구분되어 코드를 더 쉽게 이해하고 유지 관리할 수 있습니다.
useState는 React 함수 구성 요소에 상태를 추가할 수 있는 Hook입니다.
사용 예는 다음과 같습니다:
import React, { useState } from 'react';
함수 예() {
// "count"라는 상태 변수를 선언합니다. const [count, setCount] = useState(0);
// ... 위의 코드는 초기값이 0인 상태 변수 count를 선언하고 setCount를 호출하여 현재 개수를 업데이트합니다.
useEffect를 사용하면 함수 구성 요소에서 부작용 작업을 수행할 수 있습니다.
부작용은 현재 실행 결과와 관련이 없는 코드 조각을 의미합니다. 일반적인 부작용 작업에는 데이터 수집, 구독 설정 및 React 구성 요소의 DOM 수동 변경이 포함됩니다.
useEffect는 두 개의 매개변수를 받을 수 있으며 코드는 다음과 같습니다.
useEffect(callback, dependency)
첫 번째 매개변수는 실행할 함수 콜백이고 두 번째 매개변수는 선택적 종속성 배열 종속성입니다.
종속성은 선택 사항입니다. 지정하지 않으면 함수 구성 요소가 실행될 때마다 콜백이 실행되고, 지정된 경우 종속성 값이 변경될 때만 실행됩니다.
사용 예는 다음과 같습니다.
function example() {
const [count, setCount] = useState(0);
// 구성요소DidMount 및 구성요소DidUpdate와 유사합니다.
useEffect(() => {
// 브라우저 API를 사용하여 문서 제목 업데이트
document.title = `${count}번 클릭하셨습니다`;
반환 () => {
// 클래스 컴포넌트의 componentWillUnmount와 동일하게 지우는 데 사용할 수 있습니다.
}
}, [count]); // 종속성을 count로 지정하고 count가 업데이트되면 Side Effect를 실행합니다. // ... 위 코드는 useEffect를 사용하여 종속성 개수가 업데이트될 때 Side Effect 함수를 구현하고 Clear합니다. 콜백 함수를 반환하여 마지막 실행 결과입니다.
또한 useEffect는 부작용을 실행하기 위한 네 가지 타이밍을 제공합니다. 즉,
useCallback에 의해 정의된 콜백 함수는 종속성이 변경될 때만 콜백 함수를 다시 선언하므로 구성 요소가 중복된 콜백 함수를 생성하지 않도록 합니다. 이 콜백 함수를 속성으로 받는 구성 요소는 자주 다시 렌더링할 필요가 없습니다 .
사용 예는 다음과 같습니다.
const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b]) 위 코드는 종속성 a와 b가 변경될 때만 콜백 함수를 다시 선언합니다.
useMemo에서 정의한 생성 함수는 특정 종속성이 변경될 때만 다시 계산됩니다. 이는 렌더링될 때마다 반복되지 않는 높은 오버헤드 계산 에 도움이 되며, 이 계산된 값을 속성 으로 받는 구성 요소는 자주 다시 렌더링해야 합니다 .
사용 예는 다음과 같습니다.
const memoizedValue = useMemo(() => ComputeExpensiveValue(a, b), [a, b])
위 코드는 종속성 a와 b가 변경될 때만 다시 계산됩니다.
useRef는 구성 요소의 수명 주기 동안 지속되는 ref 객체를 반환합니다.
여기에는 두 가지 용도가 있습니다.
DOM 노드를 저장하는 방법의 예는 다음과 같습니다.
function TextInputWithFocusButton() {
const inputEl = useRef(널)
const onButtonClick = () => {
// `current`는 DOM에 마운트된 텍스트 입력 요소 inputEl.current.focus()를 가리킵니다.
}
반품 (
<>
<input ref={inputEl} 유형='텍스트' />
<button onClick={onButtonClick}>입력에 집중</button>
</>
)
} 위 코드는 useRef를 통해 ref 객체를 생성하고 DOM 노드의 참조를 저장하며 ref.current에 대해 DOM 작업을 수행할 수 있습니다.
여러 렌더 간에 데이터를 공유하는 예는 다음과 같습니다.
import React, { useState, useCallback, useRef } from 'react'
기본 함수 내보내기 Timer() {
//타이밍의 누적 시간을 저장하기 위해 시간 상태를 정의 const [time, setTime] = useState(0)
// 타이머를 정의합니다. 이러한 컨테이너는 크로스 컴포넌트 렌더링 사이에 변수를 저장하는 데 사용됩니다. const 타이머 = useRef(null)
// 타이밍을 시작하는 이벤트 핸들러 함수 const handlerStart = useCallback(() => {
// 현재 속성을 사용하여 ref 타이머의 값을 설정합니다.current = window.setInterval(() => {
setTime((시간) => 시간 + 1)
}, 100)
}, [])
//타이밍 이벤트 처리 함수 일시 중지 const handlerPause = useCallback(() => {
// 타이밍을 중지하려면 ClearInterval을 사용합니다. window.clearInterval(timer.current)
타이머.전류 = null
}, [])
반품 (
<div>
{시간/10}초.
<br />
<button onClick={handleStart}>시작</button>
<button onClick={handlePause}>일시중지</button>
</div>
)
} 위 코드는 useRef를 통해 변수 이름이 타이머인 ref 객체를 생성합니다. 이 객체는 구성 요소 간에 렌더링할 때 호출될 수 있고, 타이밍을 시작할 때 새 타이머를 생성하고, 타이밍이 일시 중지될 때 타이머를 지울 수 있습니다.
useContext는 컨텍스트 객체를 수신하고 컨텍스트 값을 반환하는 데 사용되며, 이는 교차 수준 데이터 공유를 달성할 수 있습니다.
예는 다음과 같습니다:
//컨텍스트 객체 생성 const MyContext = React.createContext(initialValue)
함수 앱() {
반품 (
// Context.Provider를 통해 컨텍스트 값 전달 <MyContext.Provider value='1'>
<컨테이너 />
</MyContext.Provider>
)
}
함수 컨테이너() {
<테스트 /> 반환
}
함수 테스트() {
// Context 값 가져오기 const theme = useContext(MyContext) // 1
<div></div> 반환
} 위 코드는 useContext를 통해 App 구성 요소에 정의된 Context를 획득하여 계층 구성 요소 간 데이터 공유를 달성합니다.
useReducer는 Reducer 기능을 소개하는 데 사용됩니다.
예를 들면 다음과 같습니다.
const [state, dispatch] = useReducer(reducer,initialState)
Reducer 함수와 상태의 초기값을 매개변수로 받아 배열을 반환합니다. 배열의 첫 번째 멤버는 상태의 현재 값이고 두 번째 멤버는 작업을 보내는 디스패치 함수입니다.
맞춤형 Hooks를 통해 컴포넌트 로직을 재사용 가능한 함수로 추출할 수 있습니다.
사용자 정의 후크는 일반 함수와 구별되는 두 가지 특성을 갖는 함수입니다.
예는 다음과 같습니다:
import { useState, useCallback } from 'react'
함수 useCounter() {
// 카운트를 정의합니다. 이 상태는 현재 값을 저장하는 데 사용됩니다. const [count, setCount] = useState(0)
// 1씩 더하는 연산 구현 const increment = useCallback(() => setCount(count + 1), [count])
// 1씩 감소하는 연산 구현 const decrement = useCallback(() => setCount(count - 1), [count])
//카운터 재설정 const Reset = useCallback(() => setCount(0), [])
// 호출자가 return { count, increment, decrement, Reset }을 사용할 수 있도록 비즈니스 논리 작업을 내보냅니다.
}
// 구성요소 1
함수 MyComponent1() {
const { 개수, 증가, 감소, 재설정 } = useCounter()
}
// 구성요소 2
함수 MyComponent2() {
const { 개수, 증가, 감소, 재설정 } = useCounter()
} 위 코드는 Hooks useCounter를 사용자 정의하여 MyComponent1 구성 요소와 MyComponent2 구성 요소 간의 비즈니스 로직을 쉽게 재사용합니다.
React는 공식적으로 직접 사용할 수 있는 다수의 사용자 정의 Hook을 캡슐화하는 반응 사용 라이브러리를 제공하여 구성 요소의 내부 논리를 단순화하고 코드 가독성과 유지 관리성을 향상시킵니다.
그중 일반적으로 사용되는 사용자 정의 Hook은 다음과 같습니다.
React-use 공식 웹사이트를 방문하여 사용 방법을 알아볼 수 있습니다.
이 글에서는 Hooks가 무엇인지, Hooks를 사용하는 이유, React가 제공하는 일반적인 Hooks, Hooks를 사용자 정의하는 방법 등 4가지 측면에서 React Hooks를 소개합니다.
도움이 되셨으면 좋겠습니다 읽어주셔서 감사합니다~