React Hooks 및 이점

반응하다

컴포넌트 기반 인터페이스 구축을 위한 프론트엔드 JavaScript 라이브러리인 React는 프론트엔드 개발자들 사이에서 인기를 얻었습니다. 2013년 Facebook에서 출시되었으며 현재 Meta에서 관리하고 있습니다. React는 오픈 소스이며 주요 사용 사례는 사용자 인터페이스와 DOM에 대한 구성 요소 렌더링에 중점을 둔 단일 페이지 웹 애플리케이션을 개발하는 것입니다.

React 애플리케이션은 라우팅 및 기타 클라이언트측 기능을 위해 라이브러리를 사용합니다. React의 주요 장점은 변경된 페이지 부분만 다시 렌더링하므로 변경되지 않은 DOM 요소를 불필요하게 다시 렌더링하지 않아도 된다는 것입니다.

주요 특징

선언적
선언적 프로그래밍 패러다임에 따라 React 개발자는 애플리케이션의 각 상태에 대한 뷰를 디자인한 다음 데이터 변경에 따라 업데이트되고 구성 요소를 렌더링합니다. 명령형 프로그래밍과 비교할 때 단계별로 "어떻게" 수행되는지가 아니라 "무엇"을 수행해야 하는지, 최종 페이지가 어떻게 보여야 하는지에 중점을 둡니다.

구성품
React의 코드는 모듈식이며 재사용 가능한 엔터티인 구성 요소로 구성됩니다. 애플리케이션에는 일반적으로 여러 계층의 구성 요소가 있으며 DOM의 루트 요소로 렌더링됩니다. 구성 요소를 렌더링하는 동안 속성(즉, 소품)을 통해 구성 요소 간에 값이 전달됩니다. 구성 요소 내부의 값을 상태라고 합니다.

React Hook
React 16.8(2019)부터 사용 가능한 React Hooks는 개발자가 함수 구성 요소의 React 상태 및 수명 주기 기능에 연결할 수 있게 해주는 함수입니다. 중요한 점은 Hooks를 사용하면 개발자가 클래스를 사용하지 않고도 React의 기능을 사용할 수 있다는 것입니다. 프로그래머가 클래스 구성 요소에 덜 의존해야 하기 때문에 이는 큰 이점으로 간주됩니다.

클래스 구성요소
클래스는 기능적 구성 요소와 유사하게 동작합니다. 그러나 상태 및 수명주기 이벤트를 관리하기 위해 Hook을 사용하는 대신 React.Component 기본 클래스에서 수명주기 메서드를 사용합니다.

라우팅
React에는 라우팅에 대한 기본 지원이 없으므로 타사 라이브러리를 사용하여 라우팅을 처리할 수 있습니다. 이를 통해 개발자는 쉽게 경로를 정의하고 탐색을 관리하며 URL 변경을 처리할 수 있습니다.

가상 DOM
가상 문서 개체 모델(DOM)은 React가 내부 데이터 구조를 사용하고 결과 차이를 계산하며 표시된 DOM을 효율적으로 업데이트하므로 중요한 기능입니다. 이를 통해 개발자는 각 변경 사항에 대해 전체 페이지가 렌더링되는 것처럼 코드를 작성할 수 있으며 React는 실제로 변경되는 구성 요소만 렌더링합니다. 이는 성능 향상을 제공합니다.

반응 후크

앞서 언급했듯이 Hooks는 React 16.8에 새로 추가된 기능입니다. 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다.

참고:
리액트 문서

useState
useState는 구성 요소에 상태 변수를 추가할 수 있는 React Hook입니다.

참고:
사용상태

예

'react'에서 { useState }를 가져옵니다.
함수 MyComponent() {
const [나이, setAge] = useState(28);
const [이름, setName] = useState('테일러');
const [todos, setTodos] = useState(() => createTodos());
// ...

배열 구조 분해를 사용하여 [something, setSomething]과 같은 상태 변수의 이름을 지정하는 것이 관례입니다.

매개변수에는 초기에 상태를 지정하려는 값인initialState가 포함됩니다. 모든 유형의 값이 될 수 있지만 함수에는 특별한 동작이 있습니다. 이 인수는 초기 렌더링 후에는 무시됩니다.

useState는 정확히 두 개의 값이 있는 배열을 반환합니다.

1. 현재 상황입니다. 첫 번째 렌더링 중에는 전달한 초기 상태와 일치합니다.
2. 상태를 다른 값으로 업데이트하고 다시 렌더링을 실행할 수 있는 설정 기능.

이펙트 사용
useEffect는 구성 요소를 외부 시스템과 동기화할 수 있는 React Hook입니다.

예
useEffect(설정, 종속성)

Effect를 선언하기 위해 구성 요소의 최상위 수준에서 호출됩니다.

설정은 Effect의 로직을 이용한 기능입니다. 설정 함수는 선택적으로 정리 함수를 반환할 수도 있습니다. 컴포넌트가 DOM에 추가되면 React는 설정 기능을 실행합니다. 변경된 종속성을 사용하여 다시 렌더링할 때마다 React는 먼저 이전 값으로 정리 기능을 실행한 다음 새 값으로 설정 기능을 실행합니다.

종속성은 선택 사항이며 이는 설정 코드 내에서 참조되는 모든 반응 값의 목록입니다. 반응형 값에는 props, state 및 구성 요소 본체 내부에 직접 선언된 모든 변수와 함수가 포함됩니다.

주요 시사점

React의 주요 이점 중 하나는 세계에서 가장 인기 있는 프로그래밍 언어 중 하나인 JavaScript를 사용한다는 것입니다. React는 사용하기 쉽고 일반적으로 배우기 쉬우며 웹 애플리케이션의 성능과 상호 운용성을 향상시킵니다.

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