🌙 [React] Hook - useEffect

🌊 Hook - useEffect

: useEffect는 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.  

 

useEffect

import React, { useState } from 'react';

export default function Info() {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  useEffect(() => {
    console.log('렌더링 완료');
    console.log({ name, nickname });
  });

  const onChangeName = (e) => {
    setName(e.target.value);
  };
  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  };
  return (
    <div>
      <input
        value={name}
        onChange={onChangeName}
      />
      <input
        value={nickname}
        onChange={onChangeNickname}
      />
      <div>
        <div>
          <b>이름 : </b> {name}
        </div>
        <div>
          <b>닉네임 : </b> {nickname}
        </div>
      </div>
    </div>
  );
}

 

useEffect

상태값이 변할 때 마다 리렌더링 되고, 리렌더링 될 때 마다 useEffect에서 설정한 함수가 실행되는 것을 확인할 수 있다. useEffect는 2번째 인수에 따라 1번째 인수를 호출할 시기를 정할 수 있다.

useEffect

 

 

처음에만 실행하고 싶을 때

useEffect(() => {
 console.log('드림오구')
}, []);

// useEffect의 2번째 인자를 []으로 넣어준다.

 

특정 값이 업데이트 될 때만 실행되고 싶을 때

useEffect(() => {
 console.log('드림오구')
}, [name]);

// name값이 변할 때 마다 호출한다.

 

뒷정리하기

컴포넌트가 언마운트 되기 전 또는 업데이트 되기 직전 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해야한다.

useEffect(() => {
 console.log('드림오구')
 return () => {
  console.log('뒷정리 했다!')
 
 }
}, [name]);

// 업데이트 전 뒷정리를 위해 함수를 return 한다.

 

 

리액트를 다루는 기술 을 참고하였습니다.