[React.js Hook] useEffect 알아보기, 사용하기

안녕하세요 까치입니다.

오늘은 React Hook인 useEffect의

내용에 대해 알아 보겠습니다.

useEffect는 언제 쓰느냐 하면 어떤

객체(화면이나 변수 클래스 등등)가 변경이 될때

useEffect내용(함수같은 내용)을 실행 시켜 화면에

그 내용을 표현하는 함수라고 보시면 됩니다.

말이 어려우니 바로 설명으로 들어가겠습니다.
먼저 practicePage 폴더를 생성하고 

UseEffect.js 파일을 하나 만들겠습니다.
그리고 아래와 같이 먼저 코드를 생성해 주겠습니다.

UseEffect를사용하시려면

먼저코드상단부위에 import안에

useEffect를 넣어 주시고 사용하셔야 하며

컴포넌트를 만들때 는 무조건 앞글자는

대문자로 설정해야합니다 

(ex) const UseEffect = () => {} )

    return (
        <div>
        <input value={name} placeholder="이름" onChange={onSetName}></input>
        <input value={age} placeholder="나이" onChange={onSetAge}></input>
        <hr></hr>
        <h1>{name}</h1>
        <h1>{age}</h1>
    </div>
    );

이제 useEffect에 대해 알아 보겠습니다.
useEffect는 앞서 effect가 발생 했을 때 호출 되는 함수 입니다.
만들어진 코드를 보시면 useState 이라는 

함수가 input에 name이라는 변수로 
설정이 되어 들어가 있는 것을 볼 수 있습니다.

이렇게 되면 input에 글자를 작성하게 되면 

useState함수가 계속 호출 되기 때문에 
그때 마다 useEffect의 내용이 똑같이 호출 되게 됩니다 .
이것이 useEffect의 내용입니다. 

이것을 이용하면 어떤 함수 작업을 실행 한뒤 
마지막에 다른 함수에서 어떤 작업을 

실행 하게 하고 싶을 때 useEffect를 사용하게 됩니다.

그런데 모든 변수나 함수에서 똑같이 effect라는 

함수가 호출 되면 어떨 까요 
그럼 내가 동작하고 싶을 때만 동작하는 

것이 아니라 동작 하지 않아야 하는 
구간에서도 effect라는 함수가 호출 되게 됩니다.

 

이를 막기 위해 useEffect함수 뒤에

( , [])라는 내용을 붙이게 되어 동작을 
제약 할 수 있습니다.

 

    useEffect(() => {
        console.log("Effect")
        console.log({name,age});
    }, [name]);

이렇게 
 useEffect(() => {
        console.log("Effect")
        console.log({name,age});
    }, [name]);
{} useEffect 내용 뒤에 

, [ 변수나 함수 클래 등등 ] 을 입력하게 되면 
그 변수가 동작 할 때만 Effect함수가 호출 되게 됩니다.

 

위에 내용을 보시면  console의 찍힌 내용이 

변경 된것을 알 수 있습니다.

 

이를 이용하면 화면이 그려질때만 
어떤 함수가 동작 할 때만 제약하여 

동작 할 수 있게 됩니다.

밑에 내용은 함수의 동작 내용입니다.

-- name , age 둘 중에 하나라도 동작하게 되면 호출
 useEffect(() => {
        console.log("Effect")
        console.log({name,age});
    }, [ name, age ]);

-- 화면 그려질 때만 함수 호출 
 useEffect(() => {
        console.log("Effect")
        console.log({name,age});
    }, [ ]);


또한 이렇게 작성하게 되면 name이라는 렌더링이 화면에서

질때 return() => {} 안에 있는 내용이 
호출 되고  하거나 마지막에 
화면이 언마운트 될때 호출 하게 만들 수 도 있습니다.
 useEffect(() => {

        console.log("Effect")
        console.log({name,age});
        return() => {};
    }, [ name ] );

이렇게 useEffect 함수에 대해 알아 보았습니다.
다음에 또 좋은 내용으로 찾아 뵙겠습니다.

 

 

 

소스 코드 

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


const UseEffect = () => {
    const [ name, setName ] = useState('');
    const [ age, setAge] = useState('');

    useEffect(() => {
        console.log("Effect")
        console.log({name,age});
    }, [name]);

    const onSetName = (e) => {
        setName(e.target.value);
    }

    const onSetAge = (e) => {
        setAge(e.target.value);
    }

    return (
        <div>
        <input value={name} placeholder="이름" onChange={onSetName}></input>
        <input value={age} placeholder="나이" onChange={onSetAge}></input>
        <hr></hr>
        <h1>{name}</h1>
        <h1>{age}</h1>
    </div>
    );
}

export default UseEffect;

import './App.css';
import UseEffect from './practicePage/UseEffect';

function App() {
  return (
      <UseEffect/>
  );
}

export default App;