[React] useEffect

- useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

- useEffect() 사용법

기본 형태 : useEffect(function, deps)

 

- 사용 예시

function App() {
    const [data, setData] = useState(0);
    const [search, setSearch] = useState(0);

    const download = () => {
        // 다운로드 받고 (통신을 통해서)
        let downloadData = 5; // 가정
        setData(downloadData);
    }

    // 실행시점 : 
    // (1) App() 그림이 최초 그려질 때
    // (2) 상태 변수가 변경될 때(그게 dependencyList에 등록되어 있어야함.)
    // (3) 의존리스트 관리를 할 수 있다.
    useEffect(()=>{
        console.log("useEffect 실행됨.");
        download();
    },[search]);

    return (
        <div>
            <button onClick={()=>{setSearch(2)}}>검색하기</button>
            <h1>데이터 : {data}</h1>
            <button onClick={()=>{setData(data+1)}}>더하기</button>
        </div>
    );
};