일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 자바스크립트의 탄생배경
- a && b
- for문
- JavaScript
- Math.min
- 배열 최솟값
- arr.push()
- 가우스의 공식
- 행렬...
- .split()
- .map()
- 프로그래머스 공원 산책
- 자바스크립트의 특징
- 어려운데ㅠㅠ
- async-await
- 구문과 의미
- 자바스크립트와 ECMAScript
- 소름돋는 알고리즘
- Promise.all()
- ES6 브라우저 지원 현황
- 알고리즘
- 자바스크립트
- !x.includes()
- 삼항연산자
- 프로그래밍이란
- array.reduce()
- 소오름~
- 프로그래머스
- Ajax란?
- for반복문
- Today
- Total
Ming's develop story
Chapter3 - 라이프사이클 함수로 보는 라이프사이클 (21.11.16) 본문
Chapter3 - 라이프사이클 함수로 보는 라이프사이클 (21.11.16)
Ming 2021. 11. 17. 00:32라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다 (리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있거든요.) 더 많은 라이프 사이클 함수는 공식 문서에서 확인할 수 있다.
코드를 보며 복습해보자!
import React from "react";
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component { //extends는 확장 - 자식이 부모클래스꺼를 가져온다.
// 생성자 함수 - 초기값들을 설정해준다.
constructor(props) {
super(props);
this.state = {
cat_name: '나비',
};
console.log('in constructor!');
}
changeCatName = () => {
// 다음 강의에서 배울, state 업데이트 하는 방법입니다!
// 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
this.setState({cat_name: '바둑이'}); //setState = 내 데이터 바꾸기
console.log('고양이 이름을 바꾼다!');
}
componentDidMount(){
//DOM에 다 올라가고나서 이 사이클이 실행이 된다(그래서 딱 한번만 실행됨)
//리렌더링(업데이트) 할때에는 실행되지 않는다.
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;
|
1. constructor() - 생성자 함수라고도 부른다. 컴포넌트가 생성되면 가장 처음 호출.
2. render() - 컴포넌트의 모양을 정의하는 친구이다. 여기에서도 state, props에 접근해서 데이터를 보여줄 수 있다. render() 안에 들어갈 내용은 컴포넌트의 모양에만 관여하는 것이 가장 좋다. 즉, state나, props를 건드려 데이터를 수정하려고 하면 안된다.
3. componentDidMount() - 컴포넌트가 화면에 나타나는 것을 마운트(Mount)한다고 표현한다. didMount()는 마운트가 완료 되었다는 말이고 이 함수는 첫번째 렌더링을 마친 후에만 딱 한 번 실행됩니다. 컴포넌트가 리렌더링할 때는 실행되지 않는다. 보통은 이 안에서 ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리한다. 또, 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 된다.
4. componentDidUpdate(prevProps, prevState, snapshot) - DidMount()가 첫 렌더링 후에 호출 되는 함수라면, DidUpdate()는 리렌더링을 완료한 후 실행되는 함수이다.
이 함수에 중요한 파라미터가 2개 있는데, prevProps와 prevState인데 각각 업데이트 되기 전 props, state이다. 이전 데이터와 비교할 일이 있다면 가져다 쓰고, DidUpdate()가 실행될 때도 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 된다.
'스파르타코딩클럽 - 항해99 > 항해99 Chapter3 - react 주특기 기본' 카테고리의 다른 글
Chapter3 - 함수형 Component와 export, import 방법 2가지 (0) | 2021.11.17 |
---|---|
Chapter3 - Component란? (State, Props) (21.11.17) (0) | 2021.11.17 |
Chapter3 - 라이프사이클(feat. Virtual DOM) (21.11.16) (0) | 2021.11.16 |
Chapter3 - 1주차 숙제 (21.11.16) (0) | 2021.11.16 |
Chapter3 - JSX 사용법 (21.11.15) (0) | 2021.11.16 |