[React] React Life Cycle ; 리액트 생명주기

React란?

javascript 라이브러리

React 파일들의 역할

index.js

• src 폴더에 포함
• 메인 프로그램
• HTML 템플릿 및 JavaScript의 컴포넌트를 조합하고 렌더링해 실제 표시

App.js

• src 폴더에 포함
• 컴포넌트를 정의하는 프로그램
• 실제로 화면에 표시되는 내용등이 정의

index.html

• public 폴더에 있음
• 메인 프로그램인 index.js에 대응되는 것
• HTML 템플릿 파일
• 직접 표시되는 것은 아니고, index.js에 의해 일어나 렌더링 결과가 표시됨

React Life Cycle

출처 : https://adjh54.tistory.com/42

React lifecycle 용어

용어 설명

~ will	어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어
~ did	어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어
mount	컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타는 메서드와 관련된 용어
unmount	컴포넌트 내에서 DOM을 제거하는 메서드와 관련된 용어
update	컴포넌트 내에서 변화가 발생하였을때 수행하는것을 의미
ex) props, state, 부모 컴포넌트의 리 렌더링,
forceUpdate를 통해 강제로 변경하는 경우

💡 생명주기 순서

1. 컴포넌트의 실행
2. constructor() 실행
3. render() 실행
4. ComponentDidMount() 실행

조건부 수행

• 컴포넌트 내에 변화가 있을 때 : componentDidUpdate() 실행
• 컴포넌트의 소멸이 수행되었을 때 : componentWillUnmount() 실행

 

1. Mounting - constructor()

💡 컴포넌트가 새로 생성이 되고 렌더링(DOM 생성) 이전에 수행이 되는 클래스 생성자 메서드를 의미

 

• 생성한 함수를 바인딩 할 때 사용
• state 공간에 변수 값을 초기화할 때 사용

2. Mounting - render()

 💡 미리 구현한 HTML를 화면상에 보여주는 메서드

 

• 해당 메서드 안에서는 부모 컴포넌트로 전달받은 props 값의 접근이 가능
• constructor()에서 정의한 state 값의 접근이 가능
• 해당 공간에서는 setState() 사용 불가

3. Mounting - ComponentDidMount()

💡 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드

 

• 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록에 사용
• setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 때 사용

4. Updating - componentDidUpdate()

💡 컴포넌트 내에서 변화가 발생하였을 경우에 실행되는 메서드

 

• 변화라 함은 부모 컴포넌트로부터 전달 받은 props 값의 변화가 발생하거나 부모 컴포넌트가 리 렌더링이 발생을 하는 경우 수행
• 해당 컴포넌트 내에서 state의 값이 변하는 경우 수행
• forceUpdate() 메서드를 통해 강제로 변경하는 경우에 해당 메서드가 수행

5. Unmounting - componentWillUnmount()

💡 컴포넌트 내에서 DOM을 제거할 때에 실행이 되는 메서드

 

• A, B라는 컴포넌트가 존재할 경우에 특정 이벤트에 따라서 A는 마운트하고, B는 원마운트를 하고자 할 때에 이를 사용
• 예시
  • A라는 컴포넌트 내에서 B라는 컴포넌트를 부르고 있을 전제라고 할 때, B 컴포넌트를 조건부에 따라서 소멸을 시킬 경우 해당 라이프사이클 메서드가 수행.

 

 

functional component State & Lifecycle

https://adjh54.tistory.com/43

분류 클래스형 컴포넌트 함수형 컴포넌트

Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponenDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect()

 💡 [생명주기 순서 요약]

1. 함수형 컴포넌트 호출
2. 함수형 컴포넌트 내부 실행
3. return()으로 화면 랜더링
4. useEffect() 실행

[조건부 수행] 변경 혹은 컴포넌트의 소멸이 발생시 useEffect() 실행

 

1. Mounting - 컴포넌트 내부

💡 컴포넌트가 호출 되었을 때 가장 먼저 호출 되는 것 State를 정의하거나 사용될 함수들에 대해 미리 정의

 

import { useState } from "react";

function LifecycleFunctionComponent(props){
    **/**
   * 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */**
  console.log('해당 부분이 제일 먼저 호출')
  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })
  return(
    <>
    </>
  )
}
export default LifecycleFunctionComponent;

2. Mounting - return()

💡 미리 구현한 HTML를 화면상에 보여주는 메서드

 

• 해당 메서드 안에서는 부모 컴포넌트에서 전달받은 props 값이 접근 가능
• constructor()에서 정의한 state 값의 접근이 가능
• 해당 공간에서 setState() 사용 불가

import { useState } from "react";

function LifecycleFunctionComponent(props){
    /**
   * 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */
  console.log('해당 부분이 제일 먼저 호출')
  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })

   **/**
   * 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */**
  return(
    <>
    {console.log('rendering...')}
    <div>
      <div>Main Function Component</div>
      <div>{userInfo.userAge}</div>
    </div>
    </>
  )
}
export default LifecycleFunctionComponent;

3. Mounting/Updating/Unmounting - useEffect()

 💡 useEffect()를 통해 Mounting/Updating/Unmounting 처리가 가능 하나의 컴포넌트 내에서 여러 개 선언이 가능하며, 하나의 메서드로 처리를 해도 무방

 

 💡 [ 메서드 구조 ]

useEffect( function, deps? );

• function : useEffect가 수행될 때 실행되는 함수
• deps [optional] : 배열 형태이며, 의존(dependency) 값을 의미 </aside>

deps [optinal] 값의 의미

deps의 값 구조 설명

값이 없을 경우	useEffect(()⇒{})	화면이 렌더링 된 이후 수행이 되며, 리 렌더링이 발생하는 경우 다시 수행이 된다
빈 배열 인경우	useEffect(()⇒{}, [])	화면이 렌더링 된 이후에만 수행이 된다.
배열 값이 존재하는 경우	useEffect(()⇒{}, [값])	화면이 렌더링 된 이후에 수행이 되고, ‘값’이 변경되었을 경우 해당 메서드가 수행이 된다.

3.1 Mounting - useEffect()

💡 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드 deps 파라미터를 빈 배열로 수행하면 렌더링이 수행된 이후 최초 한번 수행

 

import { useState,useEffect  } from "react";

function LifecycleFunctionComponent(props){
    /**
   * 1. 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */
  console.log('해당 부분이 제일 먼저 호출')
  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })
  
    **/**
   * 3. 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드이다.
   */
  useEffect(()=>{
    console.log('화면이 랜더링 된 이후에 바로 수행 : componentDidMoutn()와 동일')
  },[])**

   /**
   * 2. 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */
  return(
    <>
    {console.log('rendering...')}
    <div>
      <div>Main Function Component</div>
      <div>{userInfo.userAge}</div>
    </div>
    </>
  )
}
export default LifecycleFunctionComponent;

3.2 Updating - useEffect()

 💡 컴포넌트 내에서 변화가 발생하였을 경우에 실행되는 메서드

 

• 변화
  • 부모 컴포넌트로부터 전달받은 props값의 변화가 발생
  • 부모 컴포넌트가 리렌더링이 발생하는 경우
• 해당 컴포넌트 내에서 state의 값이 변하는 경우 수행

import { useState,useEffect } from "react";

function LifecycleFunctionComponent(props){
    /**
   * 1. 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */
  console.log('해당 부분이 제일 먼저 호출')
  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })
  
    **/**
   * 3. 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드이다.
   */
  useEffect(()=>{
    console.log('전달 받은 props의 값에 변화가 생겼을 경우 / 사용자 나이의 변화가 발생하였을 경우')
  },[props.appState,userInfo.userAge])**

   /**
   * 2. 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */
  return(
    <>
    {console.log('rendering...')}
    <div>
      <div>Main Function Component</div>
      <div>{userInfo.userAge}</div>
    </div>
    </>
  )
}

3.3 Unmonting - useEffect()

💡 컴포넌트 내에서 DOM을 제거할 때에 실행되는 메서드

 

• 컴포넌트의 DOM이 제거될 때에 수행
• 예시
  • A라는 컴포넌트 내에서 B라는 컴포넌트를 부르고 있을 전제라고 할 때, B 컴포넌트를 조건부에 따라서 소멸을 시킬 경우 해당 라이프사이클 메서드가 수행

import { useState,useEffect } from "react";

function LifecycleFunctionComponent(props){
    /**
   * 1. 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */
  console.log('해당 부분이 제일 먼저 호출')

  //unMount
  const [isShowTempComp,setIsShowTempComp]=useState(true)

  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })
  
    /**
   * 3. 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드이다.
   */
  // useEffect(()=>{
  //   console.log('전달 받은 props의 값에 변화가 생겼을 경우 / 사용자 나이의 변화가 발생하였을 경우')
  // },[props.appState,userInfo.userAge])

  /**
 * 임시 컴포넌트 Unmount
 */
  const fn_unmountCompoent = () => {
    setIsShowTempComp(!isShowTempComp);
  }

   /**
   * 2. 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */
  return(
    <>
    {console.log('rendering...')}
    <div>
      <div>Main Function Component</div>
      <button onClick={fn_unmountCompoent}>delete Component</button>
      {
        isShowTempComp && (
          <LifecycleUnmountComponent/>
        )
      }
    </div>
    </>
  )
}

function LifecycleUnmountComponent(){
  useEffect(()=>{
    return(
      console.log('LifecycleUnmountComponent가 Unmount 되었음')
    )
  },[])

  return(
    <div>
      <h1>Unmount Component</h1>
    </div>
  )
}

//MAIN FUNCTION
function App() {
  return (
    <div className="App">
      <h1> hola, yo soy iseo</h1>
      <LifecycleFunctionComponent/>
    </div>
  );
}

export default App;

import { useState,useEffect } from "react";

function LifecycleFunctionComponent(props){
    /**
   * 1. 컴포넌트 호출 시 가장 먼저 호출이 되는 공간
   * 컴포넌트에서 사용 될 state나 함수들을 정의 하는 공간입니다.
   */
  console.log('해당 부분이 제일 먼저 호출')

  //unMount
  const [isShowTempComp,setIsShowTempComp]=useState(true)

  const [userInfo,setUserInfo] = useState({
    userId:'yuiseo',
    userAge:28,
    isShowTempComponent:false
  })
  
    /**
   * 3. 컴포넌트 내에서 렌더링이 수행된 이후에 실행이 되는 메서드이다.
   */
  // useEffect(()=>{
  //   console.log('전달 받은 props의 값에 변화가 생겼을 경우 / 사용자 나이의 변화가 발생하였을 경우')
  // },[props.appState,userInfo.userAge])

  /**
 * 임시 컴포넌트 Unmount
 */
  const fn_unmountCompoent = () => {
    setIsShowTempComp(!isShowTempComp);
  }

   /**
   * 2. 미리 구현한 HTML를 화면상에 보여주는 메서드이다.
   */
  return(
    <>
    {console.log('rendering...')}
    <div>
      <div>Main Function Component</div>
      <button onClick={fn_unmountCompoent}>delete Component</button>
      {
        isShowTempComp && (
          <LifecycleUnmountComponent/>
        )
      }
    </div>
    </>
  )
}

function LifecycleUnmountComponent(){
  useEffect(()=>{
    return(
      console.log('LifecycleUnmountComponent가 Unmount 되었음')
    )
  },[])

  return(
    <div>
      <h1>Unmount Component</h1>
    </div>
  )
}

//MAIN FUNCTION
function App() {
  return (
    <div className="App">
      <h1> hola, yo soy iseo</h1>
      <LifecycleFunctionComponent/>
    </div>
  );
}

export default App;