모든 반응 구성 요소 수명주기 (라이프 사이클)존재하는
구성 요소 수명 페이지에 렌더링되기 전에 준비를 시작하고 페이지에서 사라지면 끝납니다..
React 프로젝트를 작업할 때
구성 요소가 처음 렌더링될 때 수행해야 하는 작업
![[JAVA #8] 9.](https://cafe.fantacola.kr/wp-content/plugins/contextual-related-posts/default.png "[JAVA #8] 9.")
구성 요소를 업데이트하기 전이나 후에 몇 가지 작업을 수행해야 할 수 있습니다.
불필요한 업데이트를 피하고 싶을 수 있습니다.
이 경우 구성 요소의 수명 주기 방법이 사용됩니다.
참고 수명 주기 메서드는 클래스 유형 구성 요소에만 사용할 수 있습니다..
함수에서 사용할 수 없지만 hooks 함수로 유사하게 작업할 수 있습니다.
1. 수명 주기 방법 이해
총 9가지 유형의 라이프사이클 메소드가 있습니다.
접두사 Will이 있는 메소드작동하는 것 일하다 전에 실행 방법
접두사 did가 있는 메소드작동하는 것 일했다 나중에 메서드가 실행 중입니다.
이러한 메서드는 구성 요소 클래스에서 재정의하고 선언하여 사용할 수 있습니다.
세 가지 수명 주기가 있습니다.
마운트, 업데이트 및 마운트 해제 범주로 나뉩니다.
모으다
DOM이 생성되어 웹 브라우저에 표시되는 것을 마운트라고 합니다.
이때 호출되는 메서드는 다음과 같다.
건설자 : 컴포넌트가 다시 빌드될 때마다 호출되는 클래스 생성자 메서드입니다.
getDerivedStateFormProps : props의 값을 state로 설정하여 사용하는 메소드입니다.
만들다 : 준비한 UI를 렌더링합니다.
구성 요소DidMount : 컴포넌트가 웹 브라우저에 표시된 후 호출되는 메소드입니다.
업데이트하려면
구성 요소는 다음 네 가지 경우에 업데이트됩니다.
하나. 소품이 바뀔 때
2. 상황이 바뀔 때
삼. 상위 구성 요소가 다시 렌더링되는 경우
4. this.forceUpdate로 렌더링을 강제 트리거하는 경우
이러한 구성 요소를 업데이트할 때 다음 메서드를 호출합니다.
다양한 이유로 구성 요소를 업데이트할 수 있습니다.
첫 번째, 상위 구성 요소에서 전달된 소품이 변경될 때.
컴포넌트에 전달된 props의 값이 변경되면 컴포넌트가 렌더링됩니다.
두번째, 보유한 상태가 setState를 통해 업데이트될 때.
제삼, 상위 구성 요소가 다시 렌더링되는 경우.
나에게 할당된 소품이 바뀌지 않거나, 가지고 있는 상태가 바뀌지 않더라도,
상위 구성 요소가 다시 렌더링되면 하위 구성 요소도 다시 렌더링됩니다.
• getDerivedStateFromProps
이 방법 마운트 과정에서이라고도 불리는
업데이트가 시작되기 전에 호출됨것이 가능하다.
소품의 변화에 따라 상태 값을 변경하고자 할 때 사용합니다..
• shouldComponentupdate
이 메서드는 구성 요소를 다시 렌더링할지 여부를 결정합니다.
이 방법으로 참 또는 거짓 값을 반환해야 할 것
다음 수명 주기 메서드 실행을 계속하려면 true를 반환합니다.하다,
반환이 거짓이면 작업을 중지하십시오.하다.
즉, 구성 요소가 다시 렌더링되지 않습니다.
특정 함수에서 this.forceUpdate() 함수를 호출하는 경우 이 프로세스를 건너뛰고 렌더링 함수를 직접 호출하십시오.하다.
• 만들다
컴포넌트를 다시 렌더링합니다.
• getSnapshotBeforeUpdate
구성 요소 변경이 DOM에 반영되기 직전에 호출됩니다.하는 방법이다.
• componentDidUpdate
구성 요소 업데이트 프로세스가 완료된 후 호출되는 메서드모두.
풀다
마운팅의 반대 프로세스, 즉 DOM에서 구성 요소 제거우르문이라고 합니다.
• ComponentWillUnmount
이 메서드는 구성 요소가 웹 브라우저에서 사라지기 전에 호출됩니다..
2. 수명 주기 방법 검토
(1) render() 함수
이 방법 구성 요소의 모양 정의.
그래서 컴포넌트에서 가장 중요한 방법당신은 말할 수 있습니다
수명주기 방법 유일하게 필요한 방법또한 그렇습니다.
이 방법 내에서 this.props 및 this.state에 액세스할 수 있습니다., 반응 항목 반환하다.
요소는 div와 같은 태그이거나 별도로 선언된 구성 요소일 수 있습니다.
아무 것도 표시하지 않으려면 null 또는 false 값을 반환할 수 있습니다.
그리고 다음을 주의하세요..
이 방법 내에서 설정 이벤트 외에는 setState를 사용하면 안 됩니다.,
브라우저의 DOM에 액세스할 수 없어야 합니다..
DOM 정보를 가져오거나 상태를 변경할 때~이다 DidlMount 구성 요소의 핸들당신은해야합니다.
(2) 생성자 메서드
constructor(props) { ... }그건 구성 요소의 생성자 메서드로 구성 요소가 처음 생성될 때 실행.
이 방법으로 초기 상태를 설정할 수 있습니다..
(3) getDerivedStateFromProps 메서드
props로 받은 값을 상태와 동기화하는 데 사용됩니다.그리고
요소 마운트 및 업데이트 시 호출됨.
static getDerivedStateFromProps (nextProps, prevState) {
if(nextProps.value !== prevState.value) { // 조건에 따라 특정 값 동기화
return { value: nextProps.value };
}
return null; // state를 변경할 필요가 없다면 null을 반환
}
(4) 구성 요소DidMount 방법
componentDidMount() { ... }이렇게 하면 구성 요소가 생성됩니다. 첫 번째 렌더링이 완료된 후 실행하다.
여기에서 다른 JavaScript 라이브러리 또는 프레임워크의 함수를 호출하거나
이벤트 등록, setTimeout, setInterval 및 네트워크 요청과 같은 비동기 작업만 처리하면 됩니다..
(5) shouldComponentUpdate 방법
shouldComponentUpdate(nextProps, nexState) { ... }이 메소드는 props 또는 status를 변경할 때 다시 렌더링할지 여부를 지정합니다.
이 메서드는 true 또는 false를 반환해야 합니다.
이 메서드는 컴포넌트 생성 시 별도로 생성하지 않는 한 기본적으로 항상 true를 반환합니다.
false가 반환되면 업데이트 프로세스가 중지됩니다.
이 메서드에서 현재 props 및 state는 this.props 및 this.state로 액세스됩니다.
새로 설정된 props 또는 state는 nextProps 및 nextState를 사용하여 액세스할 수 있습니다.
(6) getSnapshotBeforeUpdate 방법
이 방법을 사용하면 렌더링을 통해 결과가 생성됩니다. 브라우저에 실제로 표시되기 전에 호출됨.
이 메서드가 반환하는 값은 componentDidUpdate의 세 번째 매개변수인 스냅샷 값으로 전달할 수 있습니다..
갱신 직전의 값을 참조하고 싶을 때 주로 사용합니다.(예: 스크롤바 위치 유지).
getSnapshotBeforeUpdate(prevProps, prevState) {
if(prevState.array !== this.state.array) {
const { scrollTop, scrollHeight } = this.list
return { scrollTop, scrollHeight );
}
}
(7) componentDidUpdate 방법
componentDidUpdate(prevProps, prevState, snapshot) { ... }그건 렌더링 완료 후 실행.
업데이트 직후이기 때문에 DOM 관련 처리를 좀 해도 괜찮습니다.
여기 prevProps 또는 prevState를 사용하여 구성 요소가 이전에 보유한 데이터에 액세스할 수 있습니다..
또한 getSnapshotBeforeUpdate에서 반환된 값이 다음과 같은 경우 여기 스냅샷 값을 얻을 수 있습니다..
(8일) ComponentWillUnmount 방법
componentWillUnmount() { ... }그건 컴포넌트가 DOM에서 제거될 때 실행.
이벤트, 타이머 및 DOM이 componentDidcount에 의해 직접 생성된 경우 여기에서 제거해야 합니다..
(9) 구성 요소DidCatch 방법
컴포넌트 렌더링 중 오류가 발생할 때 애플리케이션이 충돌하는 대신 오류 UI를 표시하도록 허용합니다..
사용 방법은 다음과 같습니다.
componentDidCatch(error, info) {
this.setState({
error : true
});
console.log({ error, info }) ;
}여기 error는 매개변수에서 발생한 오류입니다. 알리다,
info 매개변수는 코드에서 오류가 발생한 위치를 나타냅니다.대한 정보를 제공합니다.
이전 코드에서는 console.log만 만들었고,
나중에 실제 사용 중에 오류가 발생하면 서버 API를 호출하여 별도로 검색할 수도 있습니다.
그러나 이 방법을 사용하면 구성 요소 자체에서 발생하는 오류는 잡을 수 없습니다.
this.props.children에 전파된 comport에서만 오류를 잡을 수 있다는 점에 유의해야 합니다..
3. 수명 주기 방법 사용
(하나) 샘플 구성 요소 만들기
scr 디렉터리에 LifeCycleSample.js라는 구성 요소를 만듭니다.
// LifeCycleSample.js
import { Component } from 'react';
class LifeCycleSample extends Component {
state = {
number: 0,
color: null,
}
myRef = null; // ref를 설정할 부분
constructor(props) {
super(props);
console.log('constructor');
}
static getDerivedStateFromProps(nextrops, prevstate) {
console.log('getDerivedStateFromProps');
if(nextProps.color !== prevState.color) {
return { color : nextrops.color };
}
return null;
}
componentDidMount() {
console.log('componentDidMount');
}
shouldComponentUpdate (nextProps, nextstate) {
console. log ('shouldComponentUpdate', nextrops, nextState);
// 숫자의 마지막 자리가 4면 리렌더링하지 않습니다.
return nextState.number % 10 !== 4;
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
handleClick = () => {
this.setState({
number: this.state.number + 1
});
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('getSnapshotBeforeUpdate');
if(prevProps.color !== this.props.color) {
return this.myRef.style.color;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('componentDidUpdate', prevProps, prevState);
if(snapshot) {
console.log('업데이트되기 직전 색상: ', snapshot);
}
}
render() {
console.log('render');
const style = {
color : this.props.color
};
return (
<div>
<h1 style={style} ref={ref => this.myRef=ref}>
{this.state.number}
</h1>
<p>color: {this.state.color}>
<button onClick={this handleClick}>
더하기
</button>
</div>
)
}
}
export default LifeCycleSample;
이 구성 요소는 각 수명 주기 메서드를 실행할 때마다 콘솔 디버거에 기록됩니다.
부모 구성 요소는 색상을 소품으로 가져오고 버튼을 누를 때 state.number 값에 1을 추가합니다.
getDerivedStateFromProps는 부모로부터 받은 색상 값을 상태와 동기화합니다.
그리고 getSnapshotBeforeUpdate는 DOM 변경 직전의 color 속성을 스냅샷 값으로 반환합니다.
componentDidUpdate에서 쿼리 가능하도록 만들었습니다.
또한 shouldComponentUpdate 메서드에서 state.number 값의 마지막 숫자가 4인 경우(예: 4, 14, 24, 34)
다시 렌더링을 취소하도록 설정합니다.
(2) 앱 구성 요소에서 샘플 구성 요소 사용
App.js 파일에서 기존 코드를 삭제하고 다음 코드를 작성합니다.
// App.js
import { Component } from 'react';
import LifeCycleSample from '/LifeCycleSample';
// 랜덤 색상을 생성합니다.
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
class App extends Component {
state = {
color : '#000000'
}
handleClick = () => {
this.setState({
color : getRandomColor()
});
}
render() {
return (
<div>
<button onclicke this.handleClick}>랜덤 색상</button>
<LifeCycleSample color={this.state.color}/>
</div>
);
}
}
export default App;
getRandomColor 함수는 상태의 색상 값을 임의의 색상으로 설정합니다.
16777215를 16진수로 표현하면 fffff이므로 코드는 000000이라는 fffff 값을 반환합니다.
버튼을 렌더링하고 누를 때마다 handleClick 메서드가 호출되도록 이벤트를 설정합니다.
로드된 LifeCycleSample 구성 요소에서 색상 값을 소품으로 설정합니다.
(삼) 오류 잡기
방금 만든 LifeCycleSample 구성 요소의 렌더링 기능에 의도적으로 오류를 생성해 보겠습니다.
렌더링 기능의 오류는 일반적으로 존재하지 않는 기능을 사용하려고 할 때 발생하거나
존재하지 않는 개체의 값을 가져오려고 할 때 발생합니다.
LifeCydleSample의 렌더링 기능을 다음과 같이 수정합니다.
// LifeCycleSample.js
...
render() {
console.log('render');
const style = {
color : this.props.color
};
return (
<div>
{this.props .missing.value}
<h1 style={style} ref={ref => this.myRef=ref}>
{this.state.number}
</h1>
<p>color: {this.state.color}>
<button onClick={this handleClick}>
더하기
</button>
</div>
)
}
}
export default LifeCycleSample;
존재하지 않는 소품인 누락된 개체의 값을 가져오고 렌더링하려고 합니다.
이것은 물론 브라우저에서 오류가 발생합니다.
그러나 흰색 오류 창만 표시됩니다.
그 다음에
오류를 포착하는 ErrorBoundary라는 구성 요소를 만들어 보겠습니다.
src 디렉터리에 ErrorBoundary.js 파일을 생성하고 다음을 입력합니다.
// ErrorBoundary.js
import { Component } from 'react';
class ErrorBoundary extends Component {
state = {
error: false
};
componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({ error, info });
render () {
if (this.state.error) return <div>에러가 발생했습니다!</div>;
return this.props.children;
}
}
export default ErrorBoundary;오류가 발생하면 componentDidCatch 메서드가 호출됩니다.
이 메서드는 this.state.error의 값을 true로 업데이트합니다.
그리고 this.state.error의 값이 true이면 render 함수는 오류가 발생했음을 나타내는 메시지를 표시합니다.
이제 이 구성 요소를 사용하여 App.js에서 LifeCycleSample 구성 요소를 래핑해 보겠습니다.
// App.js
import { Component } from 'react';
import LifeCycleSample from './LifeCycleSample';
import ErrorBoundary from './ErrorBoundary';
//랜덤 색상을 생성합니다.
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
class App extends Component {
state = {
color: '#000000'
};
handleClick = () => {
this.setState({
color: getRandomColor ()
});
};
render () {
return (
<div>
<button onclick={this.handleClick}>랜덤 색상</button>
<ErrorBoundary>
<LifeCycleSample color={this state.color) />
</ErrorBoundary>
</div>
);
}
}
export default App;
수명 주기 메서드는 구성 요소 상태가 변경될 때마다 실행되는 메서드입니다.
이러한 방법은 타사 라이브러리를 사용하거나 DOM을 직접 터치해야 하는 상황에서 유용합니다.
shouldComponentUpdate는 구성 요소 업데이트의 성능을 개선할 때 중요합니다.