useEffect 훅함수 이해하기

https://www.youtube.com/watch?v=0ZJgIjIuY7U 

 

해당 영상을 참고 하였음

 

useEffect(함수, [deps]) 로 구성 되어있으며 deps에는 useEffect에서 사용해줄 배열이나 값을 넣어준다. 

useEffect는 해당 컴포넌트가 처음으로 나타날 때(마운트될때) 작동하고 []에 들어간 상태값이 변경 될때만 작동 된다. 

 

예시)

import React, {useState, useEffect} from "react";

function App() {

const [resourceType, setResourceType] = useState('posts')

console.log('hello world')
useEffect(() =>{
console.log('resources change')
}, [resourceType])

return (
<>
<div>
<button onClick={()=> setResourceType('posts')}>posts</button>
<button onClick={()=> setResourceType('users')}>users</button>
<button onClick={()=> setResourceType('comments')}>comments</button>
</div>
<h1>{resourceType}</h1>
</>
);
}

export default App;

실행하면 다음과 같이 개발자 모드에 hello world, resources change가 뜨는데

 

 

버튼을 누를때마다 해당 내용이 변경되는데 만약 같은 버튼을  두번 누르면 resources change는 작동하지 않는다 (useEffect 작동x)

그 이유는 resourceType이 변경되지 않았기 때문임

 

useEffect는 외부 api 요청하여 리스트를 보여주거나 할때 주로 쓰게 될것같다.