리액트 훅, useEffect

Hook 은 낚시바늘이라고 생각하면 된다.

컴포넌트는 등장 -> 업데이트(재렌더링) -> 퇴장 의 Lifecycle 을 거치는데 이때마다 훅을 걸어준다고 생각하면 쉽다.

 

 

예를 들어, 컴포넌트가 등장하기 전에 훅을 걸어서 "그 전에 이것 좀 해줘" 라고 할 수 있는 것이다.

또는 "퇴장 전에 이것 좀 해줘" 가 될 수 있다.

 

 

 

 

 

이것이 훅인데

다시 말해서, Hook 이란 컴포넌트의 LifeCycle 에 딴지를 거는 것이다.

 

 

 

* Hook 으로 컴포넌트의 인생 중간중간에 뭔가 명령을 줄 수 있다.

e.g.) <Detail> 퇴장 전에 이것 좀 해주세요

 

 

 

 

 

 

 

 

 

클래스형 컴포넌트를 쓰고 있을 시절...에는 훅을 이렇게 쓸 수 있었다.

▼

 

 

class Detail2 extends React.Component {

	componentDidMount(){
		// Detail2 컴포넌트가 Mount(등장) 되었을 때 실행할 코드
	}

	componentwillUnmount(){
    		// Detail2 컴포넌트가 Unmount(빠이빠이~) 되기 직전에 실행할 코드
    }
    
}

 

 

 

 

 

 

 

리액트가 업데이트되면서 새로운 훅이 등장했다.

예시 코드는 다음과 같다.

 

 

 

 

useEffect 훅1

 

import React, { useState, useEffect } from 'react';     // import 먼저 해주어야 한다.



function Detail(props){

	useEffect(()=>{    // 컴포넌트가 mount 되었을 때, 컴포넌트가 update 될 때 특정 코드를 실행할 수 있다
    		console.log(11111)   // 랜더링, 업데이트 될때 이 코드가 실행
        });

 

 

 

 

 

 

 

 

 

Detail 페이지 방문 후 alert 창이 2초 후에 사라지게 할 때 사용 할 수 있다.

 

 

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



function Detail(props){

	useEffect(()=>{       
    	// 2초 후에 어떤 alert 창을 안보이게 하자
        let 타이머 = setTimeout( ()=> {실행할 코드}, 2000);
        
        });

 

 

 

 

 

 

 

 

 

 

 

useEffect 훅2

컴포넌트가 사라질 때 코드를 실행시킬 수도 있다.

예를 들어, 다른 페이지로 이동한다거나 할 때....

 

 

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

	function Detail(props){

		useEffect(()=>{        
    			return function 어쩌구(){실행할코드~~~ }     // 사라질 때 실행할 코드가 실행됨
        	});

 

 

앞에서와는 다르게 return 이 앞에 붙는다. 그리고 이 코드의 의미는 unmount 가 될 때 실행한다고 보면 된다.

 

return ( ) => { }

이렇게 써줘도 된다.

 

 

 

 

 

 

 

 

 

useEffect 훅3

여러개를 사용하고 싶다면 다음과 같이 작성할 수도 있다.

 

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



	function Detail(props){      // 1빠로 실행

		useEffect(()=>{        
    	
        });
        
        function Detail(props){     // 2빠로 실행

		useEffect(()=>{        
    	
        });

 

 

 

 

 

---

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



function Detail(props){

let [alert, alert변경] = useState(true);

	useEffect(()=>{       
    	// 2초 후에 어떤 alert 창을 안보이게 하자
        let 타이머 = setTimeout( ()=> {실행할 코드}, 2000);
        
        });
        
        
        return (
        {
            alert === true
            ? (<div className="my-alert2">
            	<p>재고가 얼마 남지 않았습니다</p>
            	</div>)
            : null
            }

 

 

Detail 페이지 접속 후 2초 후에 alert 박스가 사라져야 함

 

 

[ UI 만드는 법 ]

1. UI 보이고 / 안보이고 상태를 state 로 저장

2. if 문 등을 이용해 state 가 true 일 때만 보여준다. 하지만 JSX 에서 { } 안에 if 문은 불가하다.

따라서 삼항 연산자를 써줘야 한다.

 

 

 

 

 

 

Q . 모든 UI 는 이렇게 만듭니까?

A. 네, 항상 보이는 UI 가 아니라면 이렇게 만듭니다.

 

 

 

 

 

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



function Detail(props){

let [alert, alert변경] = useState(true);

	useEffect(()=>{       
    	// 2초 후에 어떤 alert 창을 안보이게 하자
        let 타이머 = setTimeout( ()=> {alert변경(false) }, 2000);
        
        });
        
        
        return (
        	{
            alert === true
            ? (<div className="my-alert2">
            	<p>재고가 얼마 남지 않았습니다</p>
            	</div>)
            : null
            }

 

useEffect 는 컴포넌트가 등장/업데이트 시 실행된다.

업데이트 될때 또 저 타이머가 실행될 수 있다. 

 

 

 

 

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



function Detail(props){

let [alert, alert변경] = useState(true);
let [inputData, inputData변경] = useState('');

	useEffect(()=>{       
    	// 2초 후에 어떤 alert 창을 안보이게 하자
        let 타이머 = setTimeout( ()=> {alert변경(false) }, 2000);
        
        });
        
        
        return (
        
        {inputData }
        <input onchange={(e)=>{ inputData변경(e.target.value) }} />
        	{
            alert === true
            ? (<div className="my-alert2">
            	<p>재고가 얼마 남지 않았습니다</p>
            	</div>)
            : null
            }

 

여기서 문제

- input 에 뭔가 입력하면 (입력할 때마다) <Detail>컴포넌트가 재렌더링(업데이트) 이 일어난다.

 

그럼 타이머도 실행되고 있다.

다시 말해, input 에 뭔가 입력하면 useEffect() 도 계속 실행된다.

타이머를 맨처음 <Detail> 로드될 때만 실행하고 싶다면 ....

 

 

 

 

 

 

확인

 

let [inputData, inputData변경] = useState('');

	useEffect(()=>{       
    	// 2초 후에 어떤 alert 창을 안보이게 하자
        let 타이머 = setTimeout( ()=> {alert변경(false) }, 2000);
        console.log(1111);     // input 을 입력할 때마다 1111 이 출력되는 것을 볼 수 있다(재렌더링)
        });
        
        
        return (
        
        {inputData }
        <input onchange={(e)=>{ inputData변경(e.target.value) }} />
        	{
            alert === true
            ? (<div className="my-alert2">
            	<p>재고가 얼마 남지 않았습니다</p>
            	</div>)
            : null
            }

 

 

 

 

 

 

 

useEffect 훅4

 

useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    }, []);   // [] 안은 실행조건

 

useEffect 는 원래 업데이트될 때 항상 실행된다.

[ ] 안은 실행조건으로써 특정 state 가 변경될 때만 실행해준다.

 

 

 

 

 

만약

 

useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    console.log('안녕');
    }, [alert]);

 

이렇게 코드를 쓴다면 alert 라는 state가 변경이 될 때만 실행된다.

 

따라서 input 을 입력할때마다 재렌더링 되는 Detail 컴포넌트는

useEffect 부분만 빼고 재랜더링 된다.

 

참고 )

'안녕' 이라는 문구가 한번만 실행되는 것을 볼 수 있다.

또한 [ ] 안에는 여러개의 state 변수를 넣을 수 있다.

 

 

 

 

 

 

 

 

 

만약 [ ] 이렇게 빈 칸으로 놔두면 어떻게 될까?

그러면 아무것도 없는 이 공허한 state 가 변경될 때만 useEffect 실행해달라는 뜻이다.

 

그래서 그냥 <Detail> 업데이트시 실행이 안된다.

: <Detail> 등장시 한번 실행하고 끝난다.

 

 

 

useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    console.log('안녕');
    }, []);
    useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    console.log('안녕');
    }, []);
    useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    console.log('안녕');
    }, []);

 

이렇게 쓰면 4번만 등장하고 사라진다.

 

 

 

 

useEffect(() => {
	let 타이며 = setTimeout(()=>{ alert변경(false) }, 2000);
    console.log('안녕');
    return ()=> { clearTimeout(타이머) }    
    }, []);

 

return 은 <Detail> 컴포넌트가 사라질 때 실행할 코드이다.

그러면 <Deail> 컴포넌트가 사라질 때 타이머를 제거해주는 코드를 위처럼 작성하면 된다.