React Hooks - useEffect 이론

리액트 공부하면서 useState를 겨우 이해하며 사용하던 중 맞닥트린 useEffect,, 

여러 가지 자료를 찾아보며 공부해 본 결과 useEffect 어느 정도 이해하기 성공!

 

우선 간단한 용어정리부터

Mount - 화면에 첫 렌더링

Update - 다시 렌더링

Unmount - 화면에서 사라질 때

 

useEffect는 주로 콜백함수를 받음

useEffect( ( ) => { } )

  → 이렇게 콜백함수만 넣으면 렌더링 될 때마다 매번 실행됨 (Mount, Update 될 때마다 실행)

 

 

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

  → 이렇게 배열(Dependency Array)을 넣어주면 화면에 첫 렌더링 될 때, 그리고 배열 안의 값이 바뀔 때만 실행 

  → 배열 안을 비워 놓으면 화면에 첫 렌더링 될 때만 실행 (Mount 될 때만 실행)

 

 

clean-up 

useEffect 안에 작성된 함수의 어떤 작업을 정리하고 싶으면 클린업 함수를 리턴값에 써주면 됨

(ex. setInterval - clearInterval / setTimeout - clearTimeout... )

 

자세한 건 useEffect 실습에서 알아보도록 하자!

직접 실습하여 실습 글로 다시 찾아오겠음.. 유-바

 

 

 

---

 

 

While studying React, I almost understood and used the useState, and I encountered it, useEffect,,

As a result of studying various materials, useEffect succeeded in understanding to some extent!



Let's start with a simple terminology summary

Mount - First Rendering on Screen

Update - Re-Rendering

Mount - When it disappears from the screen



useEffect receives mainly callback functions

useEffect( ( ) => { } )

→ If you just insert the callback function like this, it runs every time it is rendered (it runs every time it is updated , mounted)

 

 

 

 

 

 

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

 

→ When an array is inserted like this, it runs only when it is first rendered on the screen and when the values in the array change

→ If you leave the array blank, run only when it is first rendered on the screen (run only when it is mounted)

 

 

 

clean-up


If you want to organize a task of a function created in useEffect, you can write the clean-up function to the return value

(ex. setInterval - clearInterval / setTimeout - clearTimeout... )



Let's find out more in the useEffect practice!

I'll practice it myself and come back with a practice article.. Yoo-Bye