React Js 파트 라이프사이클 방법 및 React의 후크-JS 튜토리얼-php.cn

React Js Part Lifecycle Methods and Hooks in React

React는 선언적으로 사용자 인터페이스를 구축할 수 있는 JavaScript 라이브러리입니다. React의 주요 개념 중 하나는 구성 요소의 수명주기를 관리하는 방법입니다. 이 기사에서는 클래스 구성 요소의 수명 주기 메서드와 Hooks라는 두 가지 주요 측면에 대해 설명합니다.

1. 클래스 구성 요소의 수명 주기 메서드

수명주기 메서드는 구성요소 수명주기의 여러 단계에서 호출되는 특수 메서드입니다. 가장 일반적인 수명 주기 방법과 그 목적은 다음과 같습니다.

에이. 설치

constructor(props): 첫 번째 메소드가 호출됩니다. 일반적으로 상태 초기화 및 메서드 바인딩에 사용됩니다.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

로그인 후 복사

componentDidMount(): 구성 요소가 DOM에 처음 마운트된 후 호출됩니다. 데이터 가져오기 또는 구독 초기화에 적합합니다.

componentDidMount() {
  this.fetchData();
}

로그인 후 복사

비. 업데이트 중

comComponentDidUpdate(prevProps, prevState): 구성 요소 업데이트 후에 호출됩니다. 소품이나 상태의 변경에 응답하는 데 유용합니다. 무한 루프를 방지하려면 변경 사항을 확인하세요.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

로그인 후 복사

기음. 마운트 해제

comComponentWillUnmount(): 구성 요소가 DOM에서 제거되기 직전에 호출됩니다. 정리가 필요한 구독, 타이머 또는 기타 작업을 정리하는 데 유용합니다.

componentWillUnmount() {
  this.cleanup();
}

로그인 후 복사

디. 오류 처리

comComponentDidCatch(error, info): 하위 구성 요소의 오류를 잡는 데 사용됩니다. 중앙 집중식 오류 처리에 유용합니다.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

로그인 후 복사

2. React Hooks 소개

React Hooks는 클래스 구성 요소를 작성하지 않고도 상태 및 수명 주기 메서드를 사용할 수 있게 해주는 기능입니다. 가장 일반적으로 사용되는 Hooks는 다음과 같습니다.

에이. 사용상태()

기능적 구성 요소에 상태를 추가하는 데 사용됩니다. 이 함수는 현재 상태와 이를 업데이트하는 함수 쌍을 반환합니다.

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>
  );
};

로그인 후 복사

비. 사용효과()

useEffect를 사용하면 기능적 구성 요소에서 부작용을 실행할 수 있습니다. 이는 componentDidMount, componentDidUpdate 및 componentWillUnmount의 기능을 결합합니다.

예 1: 빈 배열([])이 있는 useEffect 빈 배열을 종속성으로 사용하여 useEffect를 사용하면 구성 요소가 마운트된 후 효과가 한 번만 실행됩니다.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

로그인 후 복사

예 2: 종속성 배열이 없는 useEffect useEffect가 종속성 배열 없이 제공되면 구성 요소가 다시 렌더링될 때마다 효과가 실행됩니다.

componentDidMount() {
  this.fetchData();
}

로그인 후 복사

예 3: 종속성 배열이 있는 useEffect 종속성 배열을 제공하면 배열의 값 중 하나가 변경될 때마다 효과가 실행됩니다.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

로그인 후 복사

기음. useContext()

useContext 후크는 기능 구성 요소의 컨텍스트에 액세스하는 데 사용됩니다. 이는 소품 드릴링 없이 테마나 사용자 인증 상태 등 글로벌 데이터를 공유하는 데 특히 유용합니다.

예: useContext를 사용한 테마 설정
이 예에서는 밝은 테마와 어두운 테마 사이를 전환할 수 있는 간단한 테마 컨텍스트를 생성하겠습니다.

1. 테마 컨텍스트 생성
먼저 테마에 대한 맥락을 만듭니다.

componentWillUnmount() {
  this.cleanup();
}

로그인 후 복사

2. 테마 컨텍스트 소비
다음으로, 테마 컨텍스트를 사용하여 스타일을 적용하고 테마를 전환하는 버튼을 제공하는 구성 요소를 생성할 수 있습니다.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

로그인 후 복사

3. 테마 제공자로 애플리케이션 래핑
마지막으로 애플리케이션(또는 그 일부)을 ThemeProvider로 래핑하여 하위 항목에 테마 컨텍스트를 제공합니다.

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>
  );
};

로그인 후 복사

설명

테마 컨텍스트 생성: createContext와 현재 테마 상태를 관리하고 이를 전환하는 기능을 제공하는 ThemeProvider 구성 요소를 사용하여 ThemeContext를 생성합니다.
컨텍스트 소비: ThemedComponent에서는 useContext(ThemeContext)를 사용하여 현재 테마와 토글 기능에 액세스합니다. 이 구성 요소는 현재 테마를 기반으로 다양한 콘텐츠를 렌더링하고 이를 전환할 수 있는 버튼을 포함합니다.
애플리케이션 구조: 전체 애플리케이션(또는 그 일부)이 ThemeProvider에 래핑되어 모든 하위 구성 요소가 테마 컨텍스트에 액세스할 수 있습니다.

디. useMemo() 및 useCallback()

useMemo(): 렌더링할 때마다 다시 계산하지 않도록 비용이 많이 드는 계산 결과를 캐시합니다.

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

로그인 후 복사

useCallback(): 렌더링할 때마다 함수가 다시 생성되지 않도록 함수를 캐시합니다.

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

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

로그인 후 복사

3. Hook 사용의 장점

후크는 HOC(고차 구성 요소)나 렌더링 소품을 사용하지 않고도 구성 요소 간에 논리를 공유할 수 있는 유연성과 기능을 제공합니다. Hooks를 사용하면 다음과 같은 장점이 있습니다.

단순성과 명확성: 코드가 더 깔끔하고 읽기 쉬워집니다.
유연성: 로직은 어디서나 재사용할 수 있는 더 작은 기능으로 나눌 수 있습니다.
복잡성 감소: 클래스 및 복잡한 수명 주기 메서드 사용을 방지합니다.

라이프사이클 방법과 후크는 React 개발의 두 가지 중요한 측면입니다. 두 개념이 어떻게 작동하는지 이해하면 보다 효율적이고 유지 관리가 가능한 구성 요소를 만들 수 있습니다. 특히 Hooks는 기능적 구성 요소를 개발할 수 있는 새로운 가능성을 열어주고 상태 및 부작용과 상호 작용하는 방식을 변화시킵니다.

라이프사이클 방법과 Hook을 마스터하면 더욱 강력하고 반응성이 뛰어난 React 애플리케이션을 구축할 수 있습니다. 즐거운 코딩하세요!

위 내용은 React Js 파트 라이프사이클 방법 및 React의 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!