useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하도록 설정할 수 있는 Hook 이다. 클래스형 컴포넌트의 componentDidMount 와 componenetDidUpdate 를 합친 형태로 보아도 무방하다.

• Info.js

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

const Info = () => {
   const [ name, setName ] = useState('');
   const [ nick, setNick ] = useState('');
   useEffect(() => {
    console.log('마운트될 때만 실행됩니다.'); }, []);
    
   const onChangeName = (e) => {
    setName(e.target.value);
    };
    
   const onChangeNick = (e) => {
    setNick(e.target.value);
    };
    
    return (
     <div>
     ...
     </div>
 
 export default Info;

• 마운트될 때만 실행하고 싶을 때

  useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 rendering 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어있는 배열을 넣어 주면 된다.

  아래처럼!🐻

useEffect( () => {
 console.log('마운트 될때만 실행됩니다.!');
 }, []);

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

나는 input에 name 을 입력할 때, 그것만 업데이트 되고 싶다면!
아래처럼! 🐻

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

cleanup 함수 반환하기

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.

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

• Info.js

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

const Info = () => {
  const [ name, setName ] = useState('');
  const [ nick, setNick ] = useState('');
  useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
   });
   
  const onChangeName = (e) => {
    setName(e.target.value);
    };
    
  const onChangeNick = (e) => {
    setName(e.target.value);
    };
    
   return (
    <div>
      <input value={name} onChange={onChangeName} />
      <input value={nick] onChange={onChnageNick} />
      
    </div>
    <div>
      <br>이름 : </br>
    </div>
    <div>
      <br>닉네임 : </br>
    </div>
   </div>
  );
 };
 
 export default Info;
  
     

이젠 App 컴포넌트에서 info 컴포넌트의 가시성을 바꾸자
안보이다가 버튼을 클릭하면 보이게!

• App.js

import React, { useState } from 'react';
import Info from './info';

Const App = () => {
   const [ visible, setVisible ] = useState('false');
   return (
    <div>
     <button onClick = { () => {setVisible(!visible);} }
     )>
         {visible ? '숨기기' : '보이기'}
     </button>
      <hr />
      {visible && <Info /> }
    </div>
   );
  };
  
export default App;
    

컴포넌트가 나타날 때 콘솔에 effect 가 나타나고, 사라질 때 cleanup 이 나타난다.