쓰임새

react 페이지가 render될 때 마다 useEffect 내부의 함수가 불려진다.

사용법

import React, {useEffect} from "react"; 로 import한다.

useEffect(() => {
여기에 정의된 것들이 render (화면에 보여) 진다.
}, [여기 있는 값이 바뀔 때 마다(여러 state를 넣을 수 있음)]);

값이 바뀔 때 마다 render가 되면 무한 루프로 빠질 수 있기에 cleanUp function을 줄 필요가 있을 때는 useEffect함수 내부에 return 함수를 정의해 mount된 함수를 unmount한다.

useEffect(() => {
여기에 정의된 것들이 render (화면에 보여) 진다.

return () => {
	여기에 있는 것들은 render된 것을 cleanUp한다.
}

}, [여기 있는 값이 바뀔 때 마다(여러 state를 넣을 수 있음)]);

useEffect를 사용한 toggle

새로운 js파일에

import React from 'react';

export const Hello = () => {
	React.useEffect(() => {
    
    return() => {
    
    }
    })
    
    return <div>Hello</div>
}

효과를 주고 싶은 파일로 돌아와서

const [showHello, setShowHello] = useState(true);

여기서 true의 의미는 화면에 보여주는 것을 default로 하겠다.

<button onClick={() => setShowHello(!showHello)}>toggle</button>
{showHello && <Hello />} (토글 기능 주는 법)

eventListener 사용하기

useEffect(() => {
	const onMouseMove = e => {
    	console.log(e)
    }

	window.addEventListener('mousemove', onMouseMove)
    
    return () => {
    	window.removeEventListener("mousemove", onMouseMove)
    }
}, [])

여러개의 useEffect를 한 component에서 사용할 수 있고 각 useEffect는 차례대로 render된다.

fetch API

create custom hook first

예시 :
usefetch.js

import {useEffect} from 'react';

export const useFetch = (url) => {
	useEffect(() => {
    	fetch(url)
        .then(x => x.json())
        .then(y => console.log(y))
    }, [url])
}

해당 effect을 사용하고 싶은 파일로 돌아와서

useFetch('the url address');

console에서 해당 url 값을 확인할 수 있다.

실용적으로 사용하는 법

fetch한 url을 return하기 위해 const로 정의해준다.

const {data, loading} = useFetch('the url address');

fetch 파일로 돌아가서

import {useEffect, useState} from 'react';

export const useFetch = (url) => {
	const[state, setState] = useState(data: null, loading: true);

	useEffect(() => {
    	setState({data: null, loading: true})
    	
    	fetch(url)
        .then(x => x.json())
        .then(y => setState({data: y, loading: false}))
    }, [url])
    
    return state;
}

효과를 주고 싶은 파일로 돌아와서