[React]리액트 기본 Hooks - useEffect

useEffect

useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 된다.

1. 페이지가 처음 렌더링 되고 난 후

2. useEffect에 배열로 지정한 useState값이 변경될 때

즉 useEffect는 랜더링, 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해주는 함수이다.

useEffect는 콜백함수를 부르게 되며, 랜더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러개의 함수를 동작시킬 수 있다.

 

useEffect를 사용하는 방법

useEffect(() => {});

가장 기본적인 형태이지만 잘 사용하지 않는 형태이다.

Dependency가 없기 때문에 랜더링 할 때 한번, 그리고 어떤 작은 변화가 있을때마다 시시때때로 useEffect가 발생되므로 불필요한 실행이 너무 많아진다.

(Dependency여부와 상관 없이 랜더링이 끝나면 무조건! useEffect가 한번 실행된다)

 

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

useEffect를 랜더링 후 단 한 번만 실행하고 싶을 때 사용하는 형태이다.

콜백함수 뒤에 배열을 나타내는 대괄호가 붙어있고 이곳에 Dependency를 지정한다.

하지만 아무변수나 값 없이 대괄호만 있다면 이 함수는 useEffect실행 후 단 한번만 실행되고 다시는 실행되지 않는다.

 

const [name, setName] = useState();
useEffect(() => {},[name]);

useEffect를 랜더링 후 한번, 배열안 변수의 값이 변할 때 마다 실행되는 코드이다.

Dependency를 배열 안에 지정해주어 지정된 변수의 값이 변했을 때만 실행되는 형태이다.