컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.
이는 특정 시점에 코드가 실행되도록 설정할 수 있다는 것을 의미한다.
이 순서에 대해 간략히 요약한다면
- 그리기 :
render
- 그리고 난 뒤 :
componentDidMount
- 그리고 난 뒤 변경됐을 때 :
componentDidUpdate
- 그리고 난 뒤 사라질 때 :
componentWillUnmount
이를 간단히 확인하고 싶다면 아래코드로 확인할 수 있다.
export default class CounterPage extends Component {
componentDidMount() {console.log("마운트 됌!")}
componentDidUpdate() {console.log("수정되고 다시그려짐!")}
componentWillUnmount() {console.log("컴포넌트 사라짐!")}
}
클래스형 컴포넌트에는 componentDidMount
와 같은 생명주기 메서드들이 있고, 함수형 컴포넌트에는 생명주기관련 훅이 있다.
그것은 바로 useEffect
이다!!
클래스형 컴포넌트의 생명주기 메서드와 비교해 보여주겠다.
의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수로 함수가 실행되는지 안되는지에 의존한다.
따라서 useEffect는 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다.
useEffect(function, deps)
function : 실행하고자 하는 함수
deps : function을 실행시킬 조건, 배열형태이다.
따라서 여러 조건을 넣을 수 있다.
deps에 특정 값을 넣을 경우 컴포넌트가 mount될 때, 지정 값이 바뀔때 함수를 실행한다.
useEffect( () => {
console.log("마운트 됌!")
},[] )
위와같이 의존성 배열[]
에 아무것도 넣지 않으면 Mount시에만 함수를 실행하고 렌더해주고 끝나게 된다.
즉, 처음 Mount할 때 한번만 실행한다.
useEffect( () => {
console.log("수정하고 다시 그려짐!")
} )
위 문은 의존성 배열이 없기 때문에 렌더링할 때마다 함수가 실행된다.
useEffect( () => {
console.log("someState가 바뀔 때마다 다시 그려짐!")
}, [someState] )
위 문은 someState가 업데이트 되었을 때만 함수가 실행되는데, 처음 Mount시에 한 번 실행한다.
위 소제목에서 비슷할 뿐 똑같이 작동하지는 않는다
라 한 부분이 바로 이부분이다.
componentDidUpdate는 Mount시에는 실행하지 않지만,
useEffect는 기본적으로 Mount되자마자 함수를 한 번 실행한다.
useEffect( () => {
console.log("수정하고 다시 그려짐!")
// 이 부분이 끝나고 진행할 것들
return () => {
console.log("여기서 나갈래요!")
}
}, [] )
위 문의 return () => {}
은 컴포넌트가 사라질 때 실행하는
뒷정리하는 함수라 생각하면 된다.