React Hooks 2.useEffect

useEffect란?

Mount,Update,Unmount 때 특정 작업을 처리하고 싶을 때 사용한다!

useEffect의 기본구조

useEffect(()=>{//작업코드})

기본적으로 콜백 함수를 인자로 받는다!

 

useEffect의 두 가지 형태!

• 1번은 인자로 하나의 콜백만을 받는다
  • 렌더링이 될 때마다 실행된다!
• 2번은 첫 번째 인자로 콜백 함수 , 두 번째 인자로 배열로 받는다.
  • 화면에 첫 렌더링이 될 때 value값이 바뀔 때 만 실행된다!

Clean Up 이란?

• 타이머 기능을 하는 함수가 기능을 다했을 때 타이머를 멈추는 기능을 위해 사용 가능.
• 어떤 이벤트를 등록 후 추후 제거할 때도 사용 가능하다!
• return 값에 정리하는 함수를 넣어주면 된다!

---

예제로 알아보자!

toggle timer를 누르면 타이머를 시작하고 다시 누르면 기능을 멈추는 함수를 만들어보자!

실제 실행이미지!

CleanUp.js

• toggle을 사용해 버튼을 눌렀을 때 timer component가 보이도록 설계!
• showTimer의 기본값은 false로!
• 기본값이 false기 때문에 밑의 코드는 결과적으로 false!

      {showTimer && <Timer />} 

• and연산자를 통해 두 값 모두 true일 때만 작동하도록 설계!
• onClick함수를 사용해 클릭 시 현재 값의 반대로 변하도록 설계!

timer.js

useEffect(()=>{}, [])

• 빈 배열을 인자 값으로 넣어주어 첫 렌더링 시에만 작동하도록 설정!

setInterval(()=>{},1000);

• 일정 시간을 두고 반복하는 함수로써 1000ms 즉 1초마다 반복하는 함수를 사용했다!

Clean Up 코드 작성!

• return문을 사용하여 clean up 코드를 작성해주면 반복되던 함수를 중지시킬 수 있다!
• clearInterval함수를 사용해 setInterval함수를 중지시켜주었다!

결과물!

 

 

 

 

 

 

본 페이지는 유튜브 별코딩님의 영상을 참고 하였습니다.