1) 컴포넌트 라이프사이클(Component Lifecycle) : 렌더링
컴포넌트는 생성되면서부터 여러 기능들을 정해진 순서대로 실행하는데
이것을 Component Lifecycle이라 부른다.
컴포넌트 수명은 페이지 렌더링 되는 순간 시작해서, 페이지가 사라질 때 끝난다.
즉, render를 통해 우리에게 보여주고 그 다음 흐름까지 정해진 함수들이 존재한다.
이것은 개발자가 고려하지 않아도 자동으로 진행된다.
따라서, 반드시 구현해야 하는 메소드는 아니므로, 원할때 클래스 안에서 호출하여 사용하면 된다.
1) constructor(props)
2) componentWillMount()
3) render()
4) componentDidMount()
순서는 위와 같다. 콘솔로 확인을 해보면,
console.log('[App.js] - render()')
이렇게 구글 개발자 콘솔에서 확인할 수 있다.
메서드는 엄청 많다.
그 중에서,
Will~~~ 붙은 것은 어떤 작업을 하기 전에 실행되는 메소드이며,
Did~~~ 가 붙은 것은 어떤 작업을 작동한 후에 실행되는 메소드이다.
라이프 사이클(Life Cycle)은 마운트, 업데이트, 언마운트 카테고리로 나눠진다.
01) 컴포넌트 라이프사이클(Component Lifecycle) : 마운트
DOM이 생성되고, 웹 브라우저상에 나타나는 것을 마운트(Mount)라고 한다.
마운트될 때, 호출하는 메소드는 다음과 같다.
1. constructor
- 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메소드.
2. getDerivedStateFromProps
01) 컴포넌트 라이프사이클(Component Lifecycle) : 마운트
업데이트할때는 4가지 경우이다.
1. props가 변경될 때
2. state가 변경될 때
3. 부모 컴포넌트가 변경될 때
4.. this.forceUpdate로 강제로 렌더링할 때
'개발' 카테고리의 다른 글
[HTML] 폰트 어썸(Font Awesome)에서 아이콘(Icons) 사용하는 방법. CDN 연결하기 (0) | 2018.09.10 |
---|---|
터미널(Terminal)에서 해당 디렉토리 vs code 바로 실행하기 (0) | 2018.07.18 |
vs code에서 자동으로 태그(Tag) 닫아주는 패키지 설치! (0) | 2018.07.12 |
[React] 리액트에서 props이란 무엇이며 어떻게 사용하는가? (0) | 2018.07.10 |
[React] 02) 리액트(React) 설치 방법 및 구조 (0) | 2018.07.07 |