[React] useEffect 사용법

 

React useEffect 사용법 

 

 

useEffect가 필요한 이유?

 

컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때 마다 

실행시키고 싶은 작업이 있을 시 사용할 수 있다. 

 

 

useEffect 란?

 

 클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것.

componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.

                     componentDidUpdate: 리렌더링을 완료 한 후 실행. 즉 render()가 업데이트 될 때마다 실행

compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행.

 

실제로 코드를 통해서 보자

 

 

1. 첫 번째 형식

/*첫 번째*/ 
useEffect(()=>{
//작업 내용 
});
-> 랜더링이 완료될 때 마다 실행

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


export default function UseEffectTest() {


    const UseEffect = () => {
    const [text, setText] = useState(""); 
    const onChange = (e) => { setText(e.target.value); }; 
    useEffect(() => { console.log("렌더링이 완료될 때마다 실행"); });
    return (

        <div>
        <input value={text} onChange={onChange} /> 
        </div>); 
    };

    return UseEffect();
}

 

처음 렌더링이 완료된 후 useEffect함수가 실행되고, input value가 변할 때 마다 렌더링 되어 useEffect 실행

 

 

 

2)두번째 형식

 

/*두 번째*/ useEffect(()=>{
document.title = number 
},[number]);

-> 첫 렌더링 후 한번 실행, 그후에는 []<-안의 값이 업데이트 될 때만 실행

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


export default function UseEffectTest() {


    const UseEffect = () => {
        const [text, setText] = useState("");
        const [message, setMessage] = useState("");
        const onChange = (e) => { setText(e.target.value); };
        const onChange2 = (e) => { setMessage(e.target.value); };
        useEffect(() => {
            console.log(text);
            console.log("렌더링이 완료될 때마다 실행합니다.");
          
        },
            [text]); //text가 업데이트될 때마다 실행 

        return (
        <div> 
            <input value={text} onChange={onChange} />
            <div></div>
            <input value={message} onChange={onChange2} /> 
        </div>
        );
    };
    return UseEffect();
}

첫 렌더링때 실행 -> text가  변하면 랜더링 / message가 변해도 랜더링이 되지 않는다. 

 

사진을 보면 message가 변해도 랜더링이 안되지만 []안에 넣어둔 text값이 변하니 랜더링이 됨을 확인 할 수 있다. 

 

이처럼 useEffet를 사용하여 원하는 랜더링 주기에 따라서 사용을 할 수 있다.