React - Lifecycle (생성함수)

Lifecycle

생성 / 수정 을 의미한다.

 

Mount 함수

Method 영역

컴포넌트 생성 함수 : 자동실행

 

 

특징

화면이 뜨자마자 실행된다.

최초 1번만 화면이 뜰 때 실행된다.

 

 

사용법

import { useEffect } from 'react'

useEffect(() => {실행문;} , [ 감시할 변수 ])

 

 

예제)

let [element , setElement] = useState(true);

 

 

컴포넌트 생성 함수 : 자동실행

Mount 함수

useEffect(() => { 실행문 } , [])

 

 

컴포넌트 수정 함수 : 자동실행

변수의 값이 바뀔 때 자동 실행된다.

useEffect(() => { 실행문 } , [ 감시할 변수 ])

 

 

결과

컴포넌트 생성 함수 = 최초 실행문

컴포넌트 수정 함수 = 최초 실행문

 

 

만약 click함수를 넣고 element(true) => setElement(false)로 두면

 

결과

컴포넌트 수정 함수 = 수정 실행문을 실행