React useEffect 이해해서 사용하기

 

함수형 컴포넌트에서 componentDidMount,componentDidUpdate,componentWillUnmount 의 라이프사이클을 대신해 사용 할 수 있는것이 바로 useEffect 입니다.
그럼 어떻게 useEffect를 사용하는지 확인해봅시다

 

 

1. componentDidMount,
componentDidUpdate hook

const Messege = ()=>{
    const [message, setMessage] = useState('안녕하세요');

    useEffect(() => {
        console.log('useEffect 실행');
    
        setTimeout(() => {
          setMessage("만나서 반가웠어요");
        }, 3000)
      },[]) // 빈 배열

    return(
       <div>{message}</div>
    )
}

 

useEffect는 첫번째 인수로 함수를 받고 두번째 인수로는 배열을 받습니다.
return -> componentDidmount -> return 순서로 라이프사이클이 실행됩니다.
componentDidmount를 적용하고 싶다면 빈배열을 넣어줘야 합니다
빈배열을 넣어주면 useEffect가 state와 props에 종속되지 않습니다 즉 렌더링 되도 한번만 실행한다는 거죠.
그래서 위의 코드를 실행하면 console이 한번만 찍히는 걸 확인할 수 있습니다.
만약 useeffect가 state값이 바뀔때마다 실행이 되야 한다면 배열안에 state 값을 넣어주면 됩니다.

componentDidUpdate를 실행하고 싶다면 빈배열을 빼주면 됩니다.
그렇게되면 state값이 바뀔때 마다 리렌더링 되니까요.

 

 

 

 

2. componentWillUnmount hook

 

componentDidMount의 상태를 해제 시켜줄 경우 사용합니다 
예시로 알아볼까요 ~ ?

const Scroll = ()=>{
  const scrollY = ()=>{
    console.log(window.scrollY)
  }

  useEffect(() => {
    window.addEventListener('scroll',scrollY);
  },[]);

  return (
    <div>스크롤중</div>    
  )
}

스크롤 이벤트가 일어나고 있는 Scroll 컴포넌트를 만들어주었습니다.
useEffect 실행후 스크롤 시 콘솔에 찍히겠죠

const App = ()=>{
    const [currentScroll,setCurrentScroll] = useState(true);

    const onClickStop = (e)=>{
      setCurrentScroll(false)
    }

    return(
      <div style={{height:'1500px'}}>
       <div><button onClick={onClickStop}>멈추기</button></div>
        {currentScroll && <Scroll/>}
      </div>   
    )
}

 

App 컴포넌트에 Scroll컴포넌트를 불러주고 멈추기 버튼 클릭시 Scroll컴포넌트가 사라지도록 state를 설정해주었습니다.
그럼 어떻게될까요?
컴포넌트는 사라지겠지만 콘솔에 scroll값이 계속 찍히는걸 확인 할 수 있습니다

 

이렇게되면 컴포넌트만 눈앞에 사라졌을뿐이지 계속 이벤트는 작동되고 있으니 낭비죠..!
이럴경우 useEffect에 있는 scroll이벤트를 해제 시켜주기 위해 return 함수를 넣어줍니다.
이게 componentWillUnmonut의 역할입니다

const Scroll = ()=>{
  const scrollY = ()=>{
    console.log(window.scrollY)
  }

  useEffect(() => {
    window.addEventListener('scroll',scrollY);

    return ()=> window.removeEventListener('scroll',scrollY) // componentWillUnmount
  },[]);

  return (
    <div>스크롤중</div>    
  )
}

 

멈추기 버튼 클릭시 더이상 스크롤값이 콘솔에 찍히지 않는걸 확인하실 수 있습니다