리액트-Lifecycle Hook과 useEffect( )

리액트에서 사용하는 덩어리, 컴포넌트는 lifecycle이라는 개념이 있다.
탄생-변화-소멸, 즉 생성, 업데이트(state변경됐을때), 삭제
이 과정을 거친다고 해서 이름이 저렇게 붙었나보다.
그리고 공부하면서 몇번씩 들어본 Hook을 컴포넌트의 삶 중간에 걸어줄 수 있다. 갈고리 라는 뜻처럼 중간중간에

• 컴포넌트 등장 전에 (작성한 코드) 실행해줘
• 컴포넌트 삭제 전에 (작성한 코드) 실행해줘
• 컴포넌트 업데이트되고나서 (작성한 코드) 실행해줘
  와 같은 명령을 걸어줄 수 있다는 것이다. 이걸 Lifecycle Hook 이라 한다.

---

옛날 방식 + 가장 많이 사용하는 Hook

class Pizza extends React.Component {
  componentDidMount(){
    //Pizza 컴포넌트가 Mount(생성) 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Pizza 컴포넌트가 Unmount(삭제) 되기전에 실행할 코드
  }
}

요즘 방식(useEffect)

function 컴포넌트 안에 사용해주면 된다. 더 간결해서 많이 사용한다.

import React, {useState, useEffect} from 'react';

function Pizza(){
  useEffect(()=>{
    //마운트 됐을때 실행할 코드
  });
  
  return (
    <HTML많은곳/>
  )
}

1. 최상단에 useEffect를 import해준다.
2. function 컴포넌트 안에 useEffect()를 넣어주고,
3. 그 안에 콜백함수를 넣어준다.
4. 콜백함수 안에는 Pizza 컴포넌트가 등장했을 때 실행할 코드를 넣어준다.

• 컴포넌트가 등장한 지 n초 후 코드를 실행시키고 싶으면 자바스크립트공부할 때 자주 본 setTimeout()을 넣어준다.

---

컴포넌트가 사라질 때 원하는 코드를 실행시키고 싶다면

import React, {useState, useEffect} from 'react';

function Pizza(){
  useEffect(()=>{
    //마운트 됐을때 실행할 코드
  return function(){ 
    //언마운트 됐을때 실행할 코드 
    }
  });
  
  return (
    <HTML많은곳/>
  )
}

return을 추가해주고, 그 안에 원하는 코드를 입력하면 된다. 화살표함수도 가능하다.

---

useEffect는 여러개를 사용하는 것도 가능하며, 작성한 순서대로 동작한다.

import {useState, useEffect} from 'react';

function Pizza(){
 useEffect(()=>{첫번째로 실행할 코드}) 
 useEffect(()=>{두번째로 실행할 코드})
 useEffect(()=>{세번째로 실행할 코드})
  ...
 return (
  <HTML많은곳/>
  
)}