'componentWillMount'에 해당되는 글 1건

  1. 2018.07.13 [React] 04) 리액트(React)에서 컴포넌트 라이프사이클(Component Lifecycle)

1) 컴포넌트 라이프사이클(Component Lifecycle) : 렌더링


컴포넌트는 생성되면서부터 여러 기능들을 정해진 순서대로 실행하는데 


이것을 Component Lifecycle이라 부른다.


컴포넌트 수명은 페이지 렌더링 되는 순간 시작해서, 페이지가 사라질 때 끝난다.


즉, render를 통해 우리에게 보여주고 그 다음 흐름까지 정해진 함수들이 존재한다.


이것은 개발자가 고려하지 않아도 자동으로 진행된다.


따라서, 반드시 구현해야 하는 메소드는 아니므로, 원할때 클래스 안에서 호출하여 사용하면 된다.


1) constructor(props)


constructor(props) {
super(props);
console.log('[App.js] Inside Constructor')
  state = {
persons: [
{ name: 'SUNG', age: 10 },
{ name: 'JANG', age: 25 },
{ name: 'Ho', age: 40 }
]
showPersons: false
}
}


2) componentWillMount()


3) render()


4) componentDidMount()


순서는 위와 같다. 콘솔로 확인을 해보면,


componentWillMount() {
console.log('[App.js] - componentWillMount()')
}

componentDidMount() {
console.log('[App.js] - componentDidMount()')
}

render () {

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로 강제로 렌더링할 때


Posted by sungho88
,