React는 선언적으로 사용자 인터페이스를 구축할 수 있는 JavaScript 라이브러리입니다. React의 주요 개념 중 하나는 구성 요소의 수명주기를 관리하는 방법입니다. 이 기사에서는 클래스 구성 요소의 수명 주기 메서드와 Hooks라는 두 가지 주요 측면에 대해 설명합니다.
수명주기 메서드는 구성요소 수명주기의 여러 단계에서 호출되는 특수 메서드입니다. 가장 일반적인 수명 주기 방법과 그 목적은 다음과 같습니다.
constructor(props) { super(props); this.state = { count: 0 }; }
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); }
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의 기능을 결합합니다.
constructor(props) { super(props); this.state = { count: 0 }; }
componentDidMount() { this.fetchData(); }
componentDidUpdate(prevProps) { if (this.props.id !== prevProps.id) { this.fetchData(); } }
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에 래핑되어 모든 하위 구성 요소가 테마 컨텍스트에 액세스할 수 있습니다.
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> ); };
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> ); };
후크는 HOC(고차 구성 요소)나 렌더링 소품을 사용하지 않고도 구성 요소 간에 논리를 공유할 수 있는 유연성과 기능을 제공합니다. Hooks를 사용하면 다음과 같은 장점이 있습니다.
라이프사이클 방법과 후크는 React 개발의 두 가지 중요한 측면입니다. 두 개념이 어떻게 작동하는지 이해하면 보다 효율적이고 유지 관리가 가능한 구성 요소를 만들 수 있습니다. 특히 Hooks는 기능적 구성 요소를 개발할 수 있는 새로운 가능성을 열어주고 상태 및 부작용과 상호 작용하는 방식을 변화시킵니다.
라이프사이클 방법과 Hook을 마스터하면 더욱 강력하고 반응성이 뛰어난 React 애플리케이션을 구축할 수 있습니다. 즐거운 코딩하세요!
위 내용은 React Js 파트 라이프사이클 방법 및 React의 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!