[코딩애플;React]Lifecycle과 useEffect

1. 컴포넌트의 lifecycle 요약

-mount : 생성 되어 페이지에 장착

-update: 업데이트 되어 재랜더링 되고

-unmount : 필요없으면 제거됨

 

2.useEffect 

:컴포넌트 인생에 참견하는 hook

*옛날 클래식 방식으로 간섭했던 방

class Detail2 extends React.Component {

    componentDidMount(){

      //Detail2 컴포넌트가 로드되고나서 실행할 코드

    }

    componentDidUpdate(){

      //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드

    }

    componentWillUnmount(){

      //Detail2 컴포넌트가 삭제되기전에 실행할 코드

    }

  }

-useEffect import 하기

 

import { useState ,useEffect } from 'react'

 

 

-useEffect 안에 실행할 코드 작성 -> mount & update 할 때 실행된다.

:html랜더링 된 이후 동작함 

=>불필요하게 긴 코드가 있는 함수가 작동해야 하는 경우, 좀 더 빠른 페이지 랜더링을 위해서 랜더링이나 재랜더링이 완료된 후에 작동할 코드로 넣으면 더욱 좋음 : 랜더링에 필요한거 이외에 다 저기 안에 넣어라~

    useEffect(()=>{

        실행할코드

    })

 

** useEffect안에 실행되는 코드는 디버그를 위해 두번 실행됨

->이게 싫으면 index.js에서 <React.StrictMode> 삭제

 

📚숙제1.랜더링 되고 2초 후에 사라지는 박스 만들어보기

....생략    

 

useEffect(()=>{

        setTimeout(()=>{setcount(true)}, 2000);

    })

    let [count, setcount] =useState(false)

 

    return(

        <div className="container">

        {

            count == false ? <YellowBox>2초이후에 사라질것</YellowBox>:null

        }

... 생략

 

 

3.useEffect 실행 조건

-[ ]안에 있는 변수나 state가 변경될 때만 useEffect 코드가 실행됨

-[ ]안에는 여러가지 변수나 state 넣을 수 있다.

 

useEffect(()=>{ 실행할코드 }, [변수 or state])

 

 

4.clean up function

- 어떤 코드가 컴포넌트가 mount될 때마다 실행되어 버그가 생기는 것을 막아주기 위해

- 타이머 제거, socket 연결요청 제거, ajax요청 중단 같은 코드 사용.

- 컴포넌트 unmount 시에도 clean up function안에 있는 것이 1회 사용됨.

   

useEffect(()=>{

       

        그 다음 실행되는 코드

       

        return ()=>{

            먼저 실행되는 코드

        }

    },[ ])

 

 

    useEffect(()=>{

        let timer =setTimeout(()=>{setcount(true)}, 2000);

        return ()=>{

            clearTimeout(timer)

        }

    },[])

 

📚숙제. 입력창에 숫자이외의 문자나 기호가 입력되면 알럿창 띄우기

 

    let [inputValue, setValue] =useState('') 

    useEffect(()=>{

       if(isNaN(inputValue) == true){

        alert('그러지마세요')

       }

   

    },[inputValue])

   

    return(

 

        <input onChange={ (e) => { setValue(e.target.value) } } />

 

    )