🚲 React lifeCycle
리액트 컴포넌트들에는 라이프사이클이라는 것이 존재한다.
생성(mounting) -> 업데이트(updating) -> 제거(unmounting)
- 클래스 컴포넌트는 라이프사이클 메서드를 활용
- 함수형 컴포넌트는 Hook을 활용
👉 생멍주기 메소드
생명주기 메서드는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될때 호출되는 메서드
1️⃣ 생성(mounting)
컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출
✏️ constructor()
- 컴포넌트를 새로 만들때마다 가장 먼저 호출되는 클래스 생성자 메서드
- this.props, this.state에 접근할 수 있으며 리액트 요소를 반환
- setState를 사용할 수 없으며 DOM에서 접근하면 안된다
- props라고도 불리며 super(props)를 가장 먼저 호출해야 한다
- super(props)는 부모의 constructor 메서드를 초기화하고, 부모로부터 상속받은 메서드들을 컴포넌트로 하여금 사용할 수 있게 해준다
예시
- Header 컴포넌트는 constructor() 를 통해 React.Component를 상속 받아 상속 받은 props와 state값을 저장한다.
- state 객체의 초깃값은 favoritecolor 속성을 "red"로 지정한다.
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
render() {
return <h1>My Favorite Color is {this.state.favoritecolor}</h1>
}
}
ReactDOM.render(<Header />, document.getElementById('root'))✏️ getDerivedStateFromProps()
- props에 있는 값을 state에 동기화 시킬때 사용하는 메서드
- DOM에서 요소들이 렌더링 되기 직전에 호출된다
- 최초의 props에 기반한 state객체를 저장
- state를 인자로 받고, state가 변하면 객체를 반환
예시
- getDerivedStateFromProps() 는 props와 state를 인자로 받아 props의 favcol 값을 state의 favoritecolor 속성 값으로 세팅
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
static getDerivedStateFromProps(props, state) {
return { favoritecolor: props.favcol }
}
render() {
return <h1>My Favorite Color is {this.state.favoritecolor}</h1>
}
}
ReactDOM.render(<Header favcol="yellow" />, document.getElementById('root'))✏️ render()
- UI를 렌더링하는 메서드
- DOM에 HTML을 표현
예시
- root DOM에 return문 반환
class Header extends React.Component {
render() {
return <h1>This is the content of the Header component</h1>
}
}
ReactDOM.render(<Header />, document.getElementById('root'))✏️ componentDidMount()
- 컴포넌트가 웹 브라우저 상에 나타난 후 즉 첫 렌더링을 마친 후에 호출하는 메서드
- 라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval과 같은 비동기 작업을 처리
- setState 호출도 이 메서드에서 호출하는 경우가 많다.
예시
- componentDidMount()를 통해 Header컴포넌트가 렌더링 된 직후 1초 후에 state값을 변경
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
componentDidMount() {
setTimeout(() => {
this.setState({ favoritecolor: 'yellow' })
}, 1000)
}
render() {
return <h1>My Favorite Color is {this.state.favoritecolor}</h1>
}
}
ReactDOM.render(<Header />, document.getElementById('root'))2️⃣ 업데이트(updating)
props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다.
✏️ getDerivedStateFromProps()
- 이 메서드는 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출
- 컴포넌트가 업데이트 시 제일 먼저 호출
- 초기 props에 기반한 state가 저장되는 곳
예시
- 버튼 클릭시 blue로 변경되지만, update 직후 실행되는 이 메서드로 인해 props favcol로 전달받은 yellow값이 여전히 state에 저장
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
static getDerivedStateFromProps(props, state) {
return { favoritecolor: props.favcol }
}
changeColor = () => {
this.setState({ favoritecolor: 'blue' })
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>
Change color
</button>
</div>
)
}
}
ReactDOM.render(<Header favcol="yellow" />, document.getElementById('root'))✏️ shouldComponentUpdate()
- props또는 state를 변경했을 때, 리렌더링을 시작 여부를 지정하는 메서드
- true를 반환하면 다음 라이프사이클 메서드를 계속 실행(기본값: true)
- false를 반환하면 작업을 중지
예시
- 해당 메서드가 false로 되어있으므로 컴포넌트는 업데이트되지 X
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
shouldComponentUpdate() {
return false
}
changeColor = () => {
this.setState({ favoritecolor: 'blue' })
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<button type="button" onClick={this.changeColor}>
Change color
</button>
</div>
)
}
}
ReactDOM.render(<Header />, document.getElementById('root'))✏️ render()
- 컴포넌트 리렌더링
- DOM에 HTML을 표현
✏️ getSnapshotBeforeUpdate()
- 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
- 업데이트 이후에도 이전의 값을 확인 가능
- getSnapshotBeforeUpdate() 메소드가 존재 시 componentDidUpdate() 메소드도 포함해야 한다. 그렇지 않으면 에러가 발생
예시
- red로 렌더링 시 componentDidMount()를 통해 1초후 값이 yellow로 업데이트
- 다음엔 getSnapshoteBeforeUpdate()가 실행되어 div1에 텍스트가 출력
- 업데이트 이전 내역을 표시했으므로 업데이트 이후에도 실행되어야하기 때문에 componentDidUpdate()를 포함
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
componentDidMount() {
setTimeout(() => {
this.setState({ favoritecolor: 'yellow' })
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById('div1').innerHTML =
'Before the update, the favorite was ' + prevState.favoritecolor
}
componentDidUpdate() {
document.getElementById('div2').innerHTML =
'The updated favorite is ' + this.state.favoritecolor
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
)
}
}
ReactDOM.render(<Header />, document.getElementById('root'))
✏️ componentDidUpdate()
- 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드.
예시
- red에서 yellow로 업데이트 되었고 내용이 mydiv DOM에 출력
class Header extends React.Component {
constructor(props) {
super(props)
this.state = { favoritecolor: 'red' }
}
componentDidMount() {
setTimeout(() => {
this.setState({ favoritecolor: 'yellow' })
}, 1000)
}
componentDidUpdate() {
document.getElementById('mydiv').innerHTML =
'The updated favorite is ' + this.state.favoritecolor
}
render() {
return (
<div>
<h1>My Favorite Color is {this.state.favoritecolor}</h1>
<div id="mydiv"></div>
</div>
)
}
}
ReactDOM.render(<Header />, document.getElementById('root'))3️⃣ 언마운트(unmounting)
컴포넌트를 DOM에서 제거하는 과정
✏️ componentWillUnmount()
- 컴포넌트를 DOM에서 제거할 때 실행
- 컴포넌튼는 다시 렌더링 되지 않으므로 setState 호출시키면 안된다
⭐️ 정리
리액트의 컴포넌트는 생성 -> 업데이트 -> 제거의 생명 주기를 갖고 있다. 생성 단계에서는 constructor에 의해서 state가 초기화된 뒤, render 메소드가 실행되면서 DOM에 컴포넌트를 마운트하게 된다. 마운트가 완료되면 componentDidMount라는 생명주기 메소드가 실행이 된다. 업데이트 단계에서는 props가 새롭게 전달되거나, 상태가 업데이트 되는 경우 re-rendering을 진행하면서 DOM에 변화된 부분을 업데이트 한다. 업데이트가 완료되면 componentDidUpdate 생명주기 메소드가 실행된다. 마지막으로, 제거 단계에서는 DOM에 나타나있던 컴포넌트가 마운트 해제될 경우 제거되기 직전에 componentWillUnmount 생명주기 메소드가 실행되며, componentDidMount()에서 생성된 작업 등을 정리할 때 사용된다.
출처: https://intrepidgeeks.com/tutorial/response-the-life-cycle-of-the-response
너무나도 좋은 참조 자료
기록하여 기억하고, 계획하여 실천하자. will be a FE developer (HOME버튼을 클릭하여 Notion으로 놀러오세요!)