React Effect Hook

useEffect ?

• useEffect 함수는 Component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 실행할 수 있도록 해주는 Hook이다.
• 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것.

 

---

사용 방법

* 기본 형태 : useEffect(function, deps)
- function : 수행하고자 하는 작업
- deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열이 들어간다.

 

1. 함수 불러오기

 

import {useEffect} from 'react';

 

2. Component가 Mount 됐을 때 실행

 

useEffect(()=>{
     console.log('마운트 될때만 실행~');
}, []);

 

컴포넌트가 화면에 처음 렌더링 될 때만 실행하고 싶을 때는 위와 같이 deps위치에 빈 배열을 넣는다.

배열을 생략한다면 리렌더링이 될 때마다 실행된다.

 

3. Component가 Update 될 때 (특정 props, state가 바뀔 때)

 

function App(){
	
	const [keyword, setKeyword] = useState("");
    const onChange = (evnet) => setKeyword(event.target.value);
    useEffect(()=>{
    	console.log('값이 변화할 때만 난 호출되지~');
    }, [keyword]);
    
	return (
    	<div>
        	<input type="text"
            value={keyword}
            onChange={onChange}
            placeholder="Search here..."
            >
        </div>
    )
}

 

특정 값이 업데이트될 때 실행하고 싶다면 deps 에 검사하고 싶은 값을 넣어준다.

참고로 업데이트될 때만 실행되는 것이 아니라 마운트 될 때도 실행 되기 때문에 업데이트될 때만 특정 함수를 실행하고 싶다면 아래와 같은 꼼수를 써야 한다.

 

function App(){
	const mounted = useRef(false);
	const [keyword, setKeyword] = useState("");
    const onChange = (evnet) => setKeyword(event.target.value);
    useEffect(()=>{
    	if(!mounted.current){
        	mounted.current = true;
        }else{
        	console.log('값이 변화할 때만 난 호출되지~');
        }
    	
    }, [keyword]);
    
	return (
    	<div>
        	<input type="text"
            value={keyword}
            onChange={onChange}
            placeholder="Search here..."
            >
        </div>
    )
}

 

mounted 전이라면 mounted 현재 값을 바꿔주고,mounted 후 라면 배열 안에 있는 값이 업데이트 될 때만 코드가 실행된다.

 

3. Component가 unmount 될 때

 

function Hello(){
	useEffect(()=>{
    	console.log("created :)");
        return () => console.log("destroyed :(");
    }, [])
	return <h1>Hello</h1>
}

function App(){

	const [showing, setShowing] = useState(false);
    const onClick = () => setShowing((prev)=>!prev);
    
    return (
    	<div>
        	{showing ? <Hello/> : null}
        	<button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
        </div>
    )
}

 

showing이 true일 때 Hello 컴포넌트가 출력되는 코드이다.

Hello 컴포넌트가 생성되면 console을 통해 'created :)'가 찍히고,

useEfftect의 cleanup 함수를 통해 'destoryed :('가 찍힌다.

 

사용 후기로는 vue가 react보다 라이프사이클이 커스텀 가능하게 자잘하게 잘려서 제공된 느낌이다. react는 effect로 vue의 mounted, destroyed, watch, computed의 역할을 다 수행한다. (vue는 심지어 beforeMounted, beforeCreated, beforeDestoryed도 있음) 아직 어떤 게 더 편리하고 좋은지 장단점을 알기에는 코드 작성을 많이 안 해봐서 모르겠지만 같은 목표를 수행하기 위해 다른 방법으로 서비스를 제공하는 게 흥미롭다. like 공모전 PPT 같은 ..