React! Hook의 useEffect 에 대해서 알아보자!

useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook입니다.

 

사실 저는 클래스형에 대해서 잘 모르긴 하지만 기존의 함수형 쓰기전에 썼던

 

클래스형 컴포넌트의 componetDidMount와 componentDidUpdate를 합친 기능이라고 합니다.

 

우리는 useEffect 가 사용되는 시점을 잘 알아야 하는데!

-> 링크를 눌러서 화면에 딱 들어갔을때 ! useMount 시점

-> 화면이 바뀌는 시점 즉 랜더링 할때 ! didUpdate 시점

 

이 부분을 잘 알면 된다고 합니다.

 

import { useState, useEffect } from "react";

const Effect = () =>{
    const [name, setName] = useState('');
    const [nickname, setNickname]= useState('');
    useEffect(()=>{
        console.log("랜더링이 완료되었습니다.");
        console.log({name, nickname});
    });
    const onChangeName = e => {
        setName(e.target.value);
    }
    const onChangeNameNickname = e =>{
        setNickname(e.target.value);
    }
    return(
        <div>
        <div>
            <input value={name} onChange={onChangeName} />
            <br></br>
            <input value={nickname} onChange={onChangeNameNickname} />
        </div>
            <div><b>이름 : </b>{name}</div>
            <div><b>닉네임 : </b>{nickname}</div>
            </div>
    )
}
export default Effect;

useEffect 를 이용한 위 코드를 실행시켜 보면.

 

처음 새로 고침했을때 ! 리 랜더링이 일어나는 것을 확인 할 수 있고

input 창에 글자를 한번 입력 할 때 마다 바로바로 리 랜더링이 일어나면서 화면에 나타난다.

 

그렇다면 처음 시작할 때만 랜더링을 발생시키고 싶거나,

이름을 입력할때만 리랜더링을 작동하고 싶으면 어떻게 해야할까?

 

이때 필요한게 바로 useEffect 입니다.

 

이 기능을 의존성 배열이라고도 하는데.

const Effect = () =>{
    const [name, setName] = useState('');
    const [nickname, setNickname]= useState('');
    useEffect(()=>{
        console.log("랜더링이 완료되었습니다.");
        console.log({name, nickname});
    }, []);
    
   ===================================================
   
   const Effect = () =>{
    const [name, setName] = useState('');
    const [nickname, setNickname]= useState('');
    useEffect(()=>{
        console.log("랜더링이 완료되었습니다.");
        console.log({name, nickname});
    }, [name]);

위와 useEffect 의 함수에 끝에 대괄호 안을 비워두면 처음 시작할 때만 랜더링하고 다른 작용에는 useEffect 작동하지 않는다, 대괄호 안에 특정 상태값을 넣으면 그 해당 상태값이 set에 의해 변할때만 useEffect가 작동된다.

 

랜더링이 실행 될때 마다 어떠한 동작을 명령할 수 있는 점과 또 그 랜더링을 구분해서 원하는 특정 동작에면 useEffect 가 작동할 수 있다는 점에서 많이 유용한 hook 기능이 될 것같다.