[React] 노마드코더 ReactJs로 영화 웹 만들기 : #5 useEffect-Cleanup

clean up

- 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하는 과정

- useEffect안에서 return을 하고 실행되길 원하는 함수를 작성

// src/App.js

 

import React, { useEffect } from "react";

 

const App = () => {

 

useEffect(()=>{

// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수 

 

return ()=>{

// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수

}

}, [])

 

return <div>hello react!</div>

};

 

export default App;

 

<예시 코드>

import { func } from "prop-types";

import { useState, useEffect } from "react";

function Hello(){

function byFn(){

console.log("by~")

}

function hiFn(){

console.log("create!");

return byFn

}

useEffect(hiFn,[]);

return <h1>Hello</h1>;

}

function App(){

const[showing, setShowing] = useState(false);

const onClick=()=> setShowing(prev=>!prev);

return (

<div>

{showing ? <Hello /> : null}

<button onClick={onClick}>{showing ? "Hide" : "show"}</button>

</div>

)

}

export default App;