스파르타 코딩클럽 - 리액트 2주차(5)
1. 라이프 사이클
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐면 리액트 공식 메뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다.
(리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있다.) 더 많은 라이프 사이클 함수는 공식 문서에서 확인하기.
공식문서(링크텍스트)
- LifecycleEx.js
import React from "react";
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {
// 생성자 함수
constructor(props) {
super(props);
this.state = {
cat_name: '나비',
};
console.log('in constructor!');
}
changeCatName = () => {
// 다음 강의에서 배울, state 업데이트 하는 방법입니다!
// 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
this.setState({cat_name: '바둑이'});
console.log('고양이 이름을 바꾼다!');
}
componentDidMount(){
console.log('in componentDidMount!');
}
componentDidUpdate(prevProps, prevState){
console.log(prevProps, prevState);
console.log('in componentDidUpdate!');
}
componentWillUnmount(){
console.log('in componentWillUnmount!');
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
console.log('in render!');
return (
<div>
{/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
<h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
<button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
</div>
);
}
}
export default LifecycleEx;
-
constructor()
생성자 함수라고도 부르며, 컴포넌트가 생성되면 가장 처음 호출되는 친구이다.
-
render()
컴포넌트의 모양을 정의하는 친구이다. 여기에서도 state, props에 접근해서 데이터를 보여줄 수 있다. render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋다. 즉, state나, props를 건드려 데이터를 수정하려고 하면 안된다.
-
componentDisMount()
컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현한다. didMount()는 마운트가 완료되었다는 소리이다. 이 함수는 첫번째 렌더링을 마친 후에만 딱 한 번 실행된다. 컴포넌트가 리렌더링할 때는 실행되지 않는다. 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리한다. 또, 이미 가상돔이 실제돔으로 올라간 후니까 DOM관련 처리를 해도 된다.
-
componentDidUpdate(prevProps, prevState, snapshot)
DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수이다. 이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState이다. 각각 업데이트 되기 전 props, state이다. 이전 데이터와 비교할 일이 있다면 가져와 쓰자!
DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM관련 처리를 해도 된다. -
componentWillUnmount()
왜 render이 constructor도 두번씩 찍히는가? index.js 파일을 열면 <React.StricMode>라는 녀석이 App을 감싸고 있을 것이다. 보고싶지않으면 간단하게 지우고 App만 남겨놔도 상관없다. componentWillUnmount()가 호출되는 걸 보려면, app.js에서 LifecycleEx를 없애야하는데 삼항연산자를 사용해서 컴포넌트를 보여주거나, 없애는 걸 조건부 렌더링이라고 부른다.
Author And Source
이 문제에 관하여(스파르타 코딩클럽 - 리액트 2주차(5)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tmdals3785/스파르타-코딩클럽-리액트-2주차5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)