React useEffect, Liftcycle hook, setTimeout

useEffect코드는 페이지가 로드된 다음 실행되는 코드임.

서버로부터 불러오는 작업이나, 기타 복잡하고 시간 오래걸리는 함수들은 여기에 넣어주면

사용자가 좀더 빠르다고 체감이 가능함.

 

 

사용방법은

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

요렇게 사용하면 되고, 실제로 2초후 사라지는 안내문을 만들어보자.

let YellowBox = styled.div`
  background : yellow;
  height : 100px;
  width: 100%;
  font-size:30px;
`


function App() {

  let [view, setView] = useState(true);

  useEffect(() => {
    setTimeout(() => { setView(false) }, 2000)
  })
  let navigate = useNavigate();
  let [shoes] = useState(data);
  console.log(shoes)

  console.log(shoes[0].content);
  //{id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
  return (
    <div className="App">


      {view ? <YellowBox>2초이내 구매시 할인</YellowBox> : null}

      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/detail1') }}>detail1</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
//후략

setTimeout을 사용해서 2초뒤 view라는 state를 false로 바꿔주면

3항연산자로 조건이 걸려있는 yellowbox가 2초 뒤에 null로 변함.

정확하게 사용하면 아래처럼 []을 추가해야하는데

  useEffect(() => {
    setTimeout(() => { setView(false) }, 2000)
  }, [] )

원래는 mount, update될때 실행되지만, 

[]를 추가하면 [내부]변수가 변할때만 실행됨! (마운트시 한번 실행되는건 동일함.)

[]내부를 비워두면 업데이트 될때는 실행 안하고 마운트에만 실행됨!

unmount에도 실행됨.

 

  useEffect(() => {
    let a = setTimeout(() => { setView(false) }, 2000)
    //이렇게 변수에 넣어줘야 클린업 가능
    
    return ()=>{
    
    여기 코드는 useEffect동작 전에 실행됨.
    예)기존 타이머 제거, 기존 코드 지우는 클린업 function
    예)기존 서버 요청은 정지해주세요
    clearTimeout(a);
    
    }
    
  }, [] )

혹시 실행이 2번되는경우 index.html의 아래 표시된 코드를 지워본다.

 

 

혹시 실행시 이런 에러가 나는 경우 ( destroy is not a function)

useEffect(()=> TestFunction());
useEffect(()=> { return TestFunction(); });

위에처럼 useEffect에서 함수가 아닌 항목을 반환하려고 할때 발생하며 아래와 같이 수정해준다.\

useEffect(() => {
	TestFunction();
});

혹은 async사용시

useEffect(async()=>{},[])
//이거를
const TestFunction = async() => {}
useEffect(() => TestFunction(),[])
//이렇게 수정

 

 

useEffect 사용방법 5가지 정리

//1. 재랜더링마다 코드 실행
useEffect(()=>{ 실행할코드 })

//2. 컴포넌트 마운트(로드)시 1회만 실행
useEffect(()=>{ 실행할코드 }, [])

//3. useEffect안의 코드 실행 전에 항상 실행
useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})


//4. 컴포넌트 언마운트시 1회 실행
useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])


//5. state1이 변경될때만 실행
useEffect(()=>{ 
  실행할코드
}, [state1])

 

 

입력값 숫자만 입력하는거 alert보내기 예제

function Detail(){
  let [num, setNum] = useState('')

  useEffect(()=>{
    if (isNaN(num) == true){
      alert('그러지마세요')
    }
  }, [num])

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