[React] useEffect 항상, 한번만, 변경될때 사용법

Q. 페이지가 렌더링 될 때마다 데이터를 가져오게 해 주세요.

 

useEffect는 컴포넌트가 렌더링 될 때마다 어떠한 행위를 하게 하는 함수이다. 

 

게시판을 예로 들자면 게시판 컴포넌트를 렌더링 했을 때마다 글 목록을 가져와야 할 텐데

그때 useEffect를 사용해서 서버에서 글 목록을 가져오는 함수를 실행시키면 될 것이다.

 

useEffect는 인자로 콜백 함수와 dependency array를 받는다. 경우는 많게 세 가지로 나뉘는듯하다.

 

1.  dependency array를 받지 않고콜백 함수만 받을 때 : 렌더링 될 때마다 useEffect가 실행된다.

 

2.  dependency array를 빈 배열로 받고 콜백 함수도 받을 때 : 처음 렌더링 때에만 useEffect를 실행시킨다.

 

3.  dependency array도 받고 콜백 함수도 받을 때 : 처음 렌더링 될 때와 dependency array안에 있는 value값이 바뀔 때만 useEffect를 실행시킨다.

 

사용법을 알아보자. useEffect를 import 해주는 것을 잊지 말자.

import {useEffect,useState} from 'react';

function App(){
	
    const [name,setName] = useState("");
    
    const changeName = (e) => {
    	setName(e.target.value)
    }
    
    //렌더링 될 때 마다 실행
	useEffect(()=>{
    	console.log('렌더링 때마다 실행');
    });
    
    //처음 렌더링 되거나 배열 값이 바뀔때마다 실행
	useEffect(()=>{
    	console.log('name 변수가 바뀔 때마다 실행');
    },[name]);
    
    //처음 렌더링이 될 때만 실행
	useEffect(()=>{
    	console.log('처음 렌더링 때만 실행');
    },[]);
    
    //name변수를 변경시키기위한 input
    return (
    	<input type="text" value={name} onChange={changName} />
    )
}

이렇게 useEffect로 세 가지 경우에서의 사용법을 알아보았다.