3.1 useEffect๋?3.1.1 useEffect์ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ3.1.2 useEffect์ ๋ํ ์ค๋ช
๊ณผ ๋์๋ฐฉ์3.2 useEffect์ ๋ค์ํ ์ฌ์ฉ3.2.1 ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ๋์ํ๋ useEffect3.2.2 ๋ง์ดํธ ์์ ์์๋ง ๋์ํ๋ useEffect3.2.3 ํน์ ๊ฐ์ด ์
๋ฐ์ดํธ ๋ ๋ ๋์ํ๋ useEffect3.2.4 clean-up ํ๋ useEffect
3.1 useEffect๋?
3.1.1 useEffect์ ๋ฑ์ฅ ๋ฐฐ๊ฒฝ
ย
์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ์ฒ์ ๋ํ๋ ๋๋ฅผ โ๋ง์ดํธ(Mount)โ๋ผ๊ณ ํ๊ณ , ํ๋ฉด์์ ์ฌ๋ผ์ง ๋๋ฅผ โ์ธ๋ง์ดํธ(Unmount)โ ๋ผ๊ณ ํฉ๋๋ค. ์ด๋ ๊ฒ ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ๋ํ๋์ ์ฌ๋ผ์ง ๋๊น์ง์ ์ผ์์ ์ปดํฌ๋ํธ์ ์๋ช
์ฃผ๊ธฐ๋ผ๊ณ ํฉ๋๋ค.
ย
React ์ฑ์ด ์คํ๋์์ ๋, ์ปดํฌ๋ํธ๊ฐ ํธ์ถ๋๋ฉด ๋ง์ดํธ ์ํ์ ์ง์
ํฉ๋๋ค. ๋ง์ดํธ ์ํ๊ฐ ๋๋ฉด React๋ ์ปดํฌ๋ํธ๋ฅผ ๊ณ์ฐํด ๊ฐ์ DOM์ ์์ฑํฉ๋๋ค. ์ด๋ ๊ฒ ๊ฐ์ DOM์ผ๋ก ๋ ๋๋ง์ ์งํํ ํ, ๋ ๋๋ง๋ ๊ฒฐ๊ณผ๋ฌผ์ ์ค์ DOM์ ์
๋ฐ์ดํธํ๊ณ ๋ง์ง๋ง์ผ๋ก ์ค์ DOM์ ์
๋ฐ์ดํธ๋ ๋ด์ฉ์ด ํ๋ฉด์ ๊ทธ๋ ค์ง๋ ํ์ธํ
๊ณผ์ ๊น์ง๋ฅผ ๋ฐ๊ฒ ๋ฉ๋๋ค.
ย
API๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๋ ๊ฒฝ์ฐ, ์ผ๋ฐ์ ์ธ HTTPํต์ ์์
์ ๋น๋๊ธฐ๋ก ์ฒ๋ฆฌ๋ฉ๋๋ค. ๋ง์ฝ ์ปดํฌ๋ํธ์ ๋ณธ๋ฌธ ์์ HTTPํต์ ์์
์ด ์กด์ฌํ๋ค๋ฉด ๋ฆฌ๋ ๋๋ง ๋ ๋๋ง๋ค ์์
์ ๋ค์ ์์ฒญํ๊ฒ ๋ ๊ฒ์
๋๋ค. API๋ก ์์ฒญํ ๋ฐ์ดํฐ ํฌ๊ธฐ๊ฐ ํด ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ์ ํ์ธํ
์์
์ด ๋ฆ์ถฐ์ ธ ๋ฆฌ์์ค๋ฅผ ๋นํจ์จ์ ์ผ๋ก ์ด์ํ๊ฒ ๋ฉ๋๋ค.
ย
์ด๋ฌํ ๋ถ์ํจ๊ณผ(Side Effects)๋ค์ ์ฃผ์ ํ๋ฉด์ ๋ ๋๋ง ํ๋ ๋ฐ์ ์ง์ ์ ์ผ๋ก ์ํฅ์ ์ฃผ์ง ์๊ธฐ ๋๋ฌธ์, ์ฃผ์ ๋ ๋๋ง ์์
๊ณผ ๋ถ์ํจ๊ณผ๋ฅผ ๊ตฌ๋ถํ์ฌ ์ฒ๋ฆฌํ๋ ๊ฒ์ ๋ฒ๊ทธ๋ฅผ ์๋ฐฉํ๋ ๋ฐ์๋ ๋์์ ์ค ๋ฟ๋ง ์๋๋ผ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ์ ํ์์
๋๋ค. ์ด๋ฌํ ๋ถ์ํจ๊ณผ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ React Hook์ด ๋ฐ๋ก useEffect์
๋๋ค.
ย
๋ถ์ํจ๊ณผ(Side Effect) ๋?
๋ฆฌ์กํธ ๊ณต์๋ฌธ์์๋ โ
render()
ย ํจ์๋ ์์ํด์ผ ํฉ๋๋ค. ์ฆ, ์ปดํฌ๋ํธ์ state๋ฅผ ๋ณ๊ฒฝํ์ง ์๊ณ , ํธ์ถ๋ ๋๋ง๋ค ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํด์ผ ํ๋ฉฐ, ๋ธ๋ผ์ฐ์ ์ ์ง์ ์ ์ผ๋ก ์ํธ์์ฉ์ ํ์ง ์์ต๋๋ค.โ ๋ผ๊ณ ์ธ๊ธํฉ๋๋ค. ๋ค์ ๋งํ๋ฉด render()
ํจ์๋ ์ฃผ์ ํ๋ฉด์ ๋ ๋๋ง๋ง์ ๋ด๋นํด์ผ ํ๋ฉฐ, ๊ทธ ๋ฐ์ ์ปดํฌ๋ํธ์ state๋ฅผ ๋ณ๊ฒฝํ๊ฑฐ๋ ๋ธ๋ผ์ฐ์ ์ ์ํธ์์ฉํ์ฌ ํธ์ถ๋ ๋๋ง๋ค ๋์ผํ ๊ฒฐ๊ณผ๊ฐ ๋ฐํ๋์ง ์๋ ๊ฒ๋ค์ ๋ถ์ํจ๊ณผ๋ผ๊ณ ํ๋ ๊ฒ์
๋๋ค. ย
๊ธฐ์กด์ ํด๋์คํ ์ปดํฌ๋ํธ ๋ฐฉ์์์๋ ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋๋ฅผ ์ฌ์ฉํด ๋ถ์ํจ๊ณผ๋ฅผ ์ฒ๋ฆฌํ์์ต๋๋ค. ์์๋ฅผ ํตํด ์ดํด๋ณด๊ฒ ์ต๋๋ค.
ย
import React from "react"; class Section1 extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { console.log("ํ๋ฉด์ ๋ํ๋จ ๐"); } componentDidUpdate() { console.log("์ ๋ฐ์ดํธ ๋ฐ์ ๐"); } componentWillUnmount() { console.log("์ฌ๋ผ์ง๋๋ค ..."); } render() { return ( <div> <h2>ํด๋ฆญํ ํ์: {this.state.count}</h2> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click Me๐ </button> </div> ); } } export default Section1;
componentDidMount
, componentDidUpdate
, componentWillUnmount
๋ ๋ํ์ ์ธ ํด๋์คํ ์ปดํฌ๋ํธ์ ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋์
๋๋ค. componentDidMount
๋ ์ ์ผ ์ฒ์ ๋ ๋๋ง ํ ๋์ด ์
๋ฐ์ดํธ๋๋ ์งํ์ ์คํ๋ฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค setState ๊ฐ ์คํ๋์ด ๋ฆฌ๋ ๋๋ง์ด ์ผ์ด๋ componentDidUpdate
๋ฉ์๋๊ฐ ๊ณ์ ์คํ๋๊ณ ์์์ ํ์ธํ ์ ์์ต๋๋ค. componentWillUnmount
๋ ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ ๋์ด DOM์์ ์ ๊ฑฐ๋ ๋ ์คํ๋ฉ๋๋ค. ย
ย
useEffect Hook์ ์ด๋ฌํ React ํด๋์คํ ์ปดํฌ๋ํธ์ ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋์ธ
componentDidMount
, componentDidUpdate
, componentWillUnmount
๊ธฐ๋ฅ์ ํ๋๋ก ํตํฉํ React Hook์
๋๋ค. useEffect Hook์ ์ฌ์ฉํ๋ฉด React ์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ๋ ๋๋ง ๋ ์ดํ, ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํฉ๋๋ค. ํด๋์คํ ์ปดํฌ๋ํธ๋ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋ ๋์ ์ธ๋ง์ดํธ ๋ ๋๊ฐ ๋ถ๊ธฐ๋์ด ์๋ก ๋ค๋ฅธ ์๋ช
์ฃผ๊ธฐ ๋ฉ์๋์ ์์ฑํด์ผ ํ๋ค๋ ๋จ์ ์ ๊ฐ์ง๊ณ ์๋ ๋ฐ๋ฉด, useEffect Hook์ ์ฌ์ฉํ ํจ์ํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ํ ์ปดํฌ๋ํธ ๋ด๋ถ์ ๊ด๋ จ ์ฝ๋๋ค์ ๋ชจ์ ๊ด๋ฆฌํ ์ ์์ด ์ฝ๋ ํด์ ๋ฐ ์ ์ง๋ณด์๊ฐ ํธ๋ฆฌํ๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. ย
3.1.2 useEffect์ ๋ํ ์ค๋ช ๊ณผ ๋์๋ฐฉ์
ย
React ํด๋์คํ ์ปดํฌ๋ํธ์
componentDidMount
, componentDidUpdate
, componentWillUnmount
๊ฐ useEffect์์๋ ์ด๋ค ๋ฐฉ์์ผ๋ก ๊ตฌํ๋๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค. useEffect Hook์ ๊ธฐ๋ณธ ๋ฌธ๋ฒ์ ์๋์ ๊ฐ์ต๋๋ค.ย
useEffect(()=> { //์์ ๋ด์ฉ (Callback ํจ์ ์์ฑ) }, [, depsList])
ย
useEffect๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ ๊ฐ์ง ์ธ์๋ฅผ ๋ฐ์ต๋๋ค. ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์์
๋ด์ฉ์ ๋ด์ ์ฝ๋ฐฑ ํจ์๊ฐ, ๋ ๋ฒ์งธ ์ธ์๋ก ์์กด์ฑ ๋ฐฐ์ด(Array dependencies)์ด๋ผ ๋ถ๋ฆฌ๋ ๋ฐฐ์ด์ด ์ ๋ฌ๋ฉ๋๋ค. ์ฝ๋ฐฑ ํจ์๋ ์์
๋ด์ฉ์ด๋ฏ๋ก ๋ฐ๋์ ์์ฑํด์ผ ํ์ง๋ง, ์์กด์ฑ ๋ฐฐ์ด์ ์ต์
์ด๊ธฐ ๋๋ฌธ์ ์ ํ์ ์ผ๋ก ์์ฑํฉ๋๋ค.
์์กด์ฑ ๋ฐฐ์ด์ ์ง์ ํ ์ํ๋ ์์ฑ์ด ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์ useEffect Hook์ ์ง์ ํ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋ฉ๋๋ค. ์์กด์ฑ ๋ฐฐ์ด์ ์ ๋ฌ๊ฐ์ ๋ฐ๋ผ useEffect Hook์ด ์ด๋ป๊ฒ ์คํ๋๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
useEffect(()=> { //์์ ๋ด์ฉ (Callback ํจ์ ์์ฑ) })
ย
์ฒซ ๋ฒ์งธ๋ก ์์กด์ฑ ๋ฐฐ์ด์ ์ ๋ฌํ์ง ์์ ์์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ฐฐ์ด์ ์ฌ์ฉํ์ง ์๋ ๊ฒฝ์ฐ์๋
componentDidMount
์ componentDidUpdate
๋ฅผ ํฉ์น ๊ฒ์ฒ๋ผ ๋์ํฉ๋๋ค. ์ฒ์ ๋ ๋๋ง ๋ ์งํ์ ์ฒซ ๋ฒ์งธ ํจ์ ์ธ์์ธ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋๊ณ , props๋ฅผ ๋ฐ๊ฑฐ๋ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์ปดํฌ๋ํธ์ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํด ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋ฉ๋๋ค. ย
useEffect(()=> { //์์ ๋ด์ฉ (Callback ํจ์ ์์ฑ) },[])
ย
๋ค์์ผ๋ก ๋น ๋ฐฐ์ด์ ๋ฃ์ ๊ฒฝ์ฐ์
๋๋ค.
componentDidMount
์ฒ๋ผ ๋์ํฉ๋๋ค. ์ฆ, ๋ง์ดํธ๋๊ณ ์ฒซ ๋ ๋๋ง์ด ๋๋ ์งํ์๋ง ์ฒซ ๋ฒ์งธ ์ธ์์ธ ํจ์๊ฐ ์คํ๋ฉ๋๋ค.ย
useEffect(()=> { //์์ ๋ด์ฉ (Callback ํจ์ ์์ฑ) }, [state, props.a])
ย
์์ ๊ฐ์ด ๋ฐฐ์ด์ ์ํ๋ ์์ฑ์ ์ง์ ํ ๊ฒฝ์ฐ์๋
componentDidMount
์ componentDidUpdate
๋ฅผ ํฉ์น ๊ฒ์ฒ๋ผ ๋์ํ๊ฒ ๋ฉ๋๋ค. ์ฒ์ ๋ ๋๋ง ๋ ์งํ(componentDidMount
)์๋ ์ฒซ๋ฒ์งธ ํจ์ ์ธ์์ธ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋๊ณ , ์ด ๋ฐฐ์ด์ ๋ค์ด์๋ ์ด๋ค ๊ฐ์ ๋ณ๊ฒฝ์ด ์๊ฒผ์ ๋(componentDidUpdate
)๋ ์ฒซ ๋ฒ์งธ ์ธ์์ธ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋ฉ๋๋ค. ์ฆ, ์์กด์ฑ ๋ฐฐ์ด์ ์ง์ ํ ์์๋ฅผ ๊ด์ฐฐํ๋ค๊ฐ ํด๋น ์์์ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ๋ ๊ฒฝ์ฐ ์ฝ๋ฐฑํจ์๊ฐ ์คํ๋๋ ๊ฒ์
๋๋ค. ์ฒซ ๋ฒ์งธ ์ธ์์ธ ์ฝ๋ฐฑํจ์๋ ์ด๋ ๊ฒ ๋ฐฐ์ด์ ์๋ ๊ฐ๋ค์ ์์กดํ๊ณ ์์ด, ์ด ๋ฐฐ์ด์ ์์กด์ฑ ๋ฐฐ์ด(Array dependencies) ์ด๋ผ๊ณ ํฉ๋๋ค.
ย
useEffect(()=> { return () => { //cleanUp } }, [state, props.a])
ย
๊ทธ๋ผ
componentWillUnmount
๋ useEffect Hook์ผ๋ก ์ด๋ป๊ฒ ํํ๋ ๊น์? ๋ฐ๋ก ์ด ์ฒซ ๋ฒ์งธ ์ธ์์ธ ์ฝ๋ฐฑํจ์์ ๋ฐํ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ ๋ ๋ ์ด ๋ฐํ๋ ํจ์๋ฅผ ์คํํ๊ฒ ๋ฉ๋๋ค. ์ด๋ ๊ฒ ๋ฐํ๋์ด ์คํ๋๋ ํจ์๋ฅผ ์ ๋ฆฌ ํจ์(clean-up function)๋ผ๊ณ ํฉ๋๋ค. ์ด๋ ์ถํ 3.6์ ์์ ์์ธํ๊ฒ ๋ค๋ค๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.ย
3.2 useEffect์ ๋ค์ํ ์ฌ์ฉ
3.2.1 ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ๋์ํ๋ useEffect
ย
์ 3.2์ ์์ useEffect Hook์ ๋ํด ๊ฐ๋ตํ ์ดํด๋ณด์์ต๋๋ค. ์ด๋ฒ์๋ ์ค์ ์์ ์ฝ๋์ ํจ๊ป ๋ฆฌ๋ ๋๋ง์ด ๋ ๋๋ง๋ค ๋์ํ๋ ๊ฒฝ์ฐ์ ๋ง์ดํธ ์์ ์์๋ง ๋์ํ๋ ๊ฒฝ์ฐ์ ๋ํด ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ์๋๋ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ๋ค์ ๋ฆฌ๋ ๋๋ง ๋๋ ๊ฒ์ ํ์ธํ๋ ์์ ์ฝ๋์
๋๋ค.
ย
ex. ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋๋ง๋ค ๋ค์ ๋ฆฌ๋ ๋๋ง ๋๋ ๊ฒ์ ํ์ธํ๋ ์
// Section3.js import React, { useEffect, useState } from "react"; const Section3 = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("๋ ๋๋ง ๋๊ณ ์๋์? ๐ค"); }); return ( <div> <h2>ํด๋ฆญํ ํ์: {count}</h2> <button type="button" onClick={(e) => setCount((count) => count + 1)}> Click Me! </button> </div> ); }; export default Section3;
ย
โClick Me!โ ๋ฒํผ์๊ฒ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ค ๋๋ง๋ค count์ ๊ฐ์ด 1 ์ฉ ์ฆ๊ฐํ๋ ์ปดํฌ๋ํธ ์์ useEffect Hook์ ๋ฃ์ด useEffect ํจ์๊ฐ ๋์ํ ๋๋ง๋ค ์ฝ์์ฐฝ์ โ๋ ๋๋ง ๋๊ณ ์๋์? ๐คโ ๋ก๊ทธ๊ฐ ๋จ๋๋ก ํ๋ ์์ ์ฝ๋๋ฅผ ์์ฑํ์์ต๋๋ค.
์ ์ฝ๋๋ฅผ ์คํํ๋ฉด ์ต์ด ๋ ๋๋ง์ด ๋์์ ๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด๊ณผ ์ฝ์์ฐฝ์ด ์๋ ๊ทธ๋ฆผ 3-3๊ณผ ๊ฐ์ด ๋ํ๋๊ฒ ๋ฉ๋๋ค.
ย
ย
์ต์ด ๋ ๋๋ง์ด ์งํ๋์์ ๋, ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ง ์์์์๋ ๋ถ๊ตฌํ๊ณ ์ฝ์์ฐฝ์ โ๋ ๋๋ง ๋๊ณ ์๋์? ๐คโ ๊ฐ ์ฐํ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด์ด ์ต์ด ๋ ๋๋ง ๋๋ ์์ ์ ์ด๋ฏธ ํ ๋ฒ useEffect๊ฐ ๋์ํ์๋ค๋ ๊ฒ์ ๋ณด์ฌ์ค๋๋ค.
์ด์ ์ฒ์ ๋ฒํผ์ ํด๋ฆญํ์ ๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด๊ณผ ์ฝ์์ฐฝ์ ํ์ธํ๋ฉด ์๋์ ๊ฐ์ด โ๋ ๋๋ง ๋๊ณ ์๋์? ๐คโ๊ฐ ํ ๋ฒ ๋ ์ฝ์์ฐฝ์ ์ถ๋ ฅ๋์์์ ์๋ ๊ทธ๋ฆผ 3-4๋ฅผ ํตํด ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ ์ต์ด ๋ ๋๋ง ์์
์์ useEffect๊ฐ ๋์ํ ์ดํ, ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์์ ๋ฐ๋ฅธ count ๊ฐ์ด ๋ณ๊ฒฝ๋จ์ ๋ฐ๋ผ ๋ธ๋ผ์ฐ์ ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ค์ ์
๋ฐ์ดํธํ ๋ค, ๋ฆฌ๋ ๋๋งํ๋ ๊ณผ์ ์์์ useEffect์ ์ฝ๋ฐฑํจ์๊ฐ ํ ๋ฒ ๋ ๋์ํ๊ฒ ๋๋ ๊ฒ์
๋๋ค.
ย
ย
๋ง์ฐฌ๊ฐ์ง๋ก ๋ ๋ฒ์งธ ๋ฒํผ์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ฃผ์์ ๋ ์ฒซ ๋ฒ์งธ์ ๊ฐ์ด ๋ธ๋ผ์ฐ์ ํ๋ฉด๊ณผ ์ฝ์์ฐฝ์ด ์์๋ ๊ฒ๊ณผ ๊ฐ์ด ๋์ํจ์ ์๋ ๊ทธ๋ฆผ 3-5๋ฅผ ํตํด ํ์ธํ ์ ์์ต๋๋ค.
ย
ย
์ด์ฒ๋ผ ์ต์ด ๋ ๋๋ง์ด ๋์ํ ์์ ์ useEffect Hook์ ์ฝ๋ฐฑํจ์๊ฐ ๋์๋๊ณ , ๊ทธ ์ดํ ๋ฒํผ์ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ฌ count ๋ณ์์ ๊ฐ์ด ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ปดํฌ๋ํธ๋ฅผ ๋ฆฌ๋ ๋๋งํ๊ฒ ๋๋ฉด์ useEffect Hook์ ์ฝ๋ฐฑํจ์๊ฐ ๋ค์๊ธ ๋์ํ๊ฒ ๋๋ค๋ ์ฌ์ค์ ํ์ธํ ์ ์์์ต๋๋ค.
์ด์ฒ๋ผ useEffect Hook์ ๋ ๋ฒ์งธ ์ธ์(argument)๋ฅผ ํ ๋นํ์ง ์์ ๊ฒฝ์ฐ, useEffect ์์ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ฃผ์ด์ง ์ฝ๋ฐฑํจ์๋ ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ์คํ๋๋ค๋ ๊ฒ์ ์์ ์์๋ฅผ ํตํด ํ์ธํ ์ ์์์ต๋๋ค.
๋ค์ 3.4์ ์์๋ ์ด useEffect Hook์ ์ปดํฌ๋ํธ๊ฐ ์ต์ด๋ก ๋ง์ดํธ ๋์์ ์์ ์์๋ง ์ฝ๋ฐฑํจ์๊ฐ ๋์ํ๊ณ , ๊ทธ ์ดํ์๋ ๋์ํ์ง ์๋๋ก ํ๋ ๋ฐฉ๋ฒ์ ํ์ธํ๋๋ก ํ๊ฒ ์ต๋๋ค.
ย
3.2.2 ๋ง์ดํธ ์์ ์์๋ง ๋์ํ๋ useEffect
ย
์ต์ด ๋ ๋๋ง์์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋๋ ๋์๋ง useEffect Hook์ด ๋์ํ๋๋ก ํ๊ธฐ ์ํด์๋ ๋ ๋ฒ์งธ ์ธ์์ธ ์์กด์ฑ ๋ฐฐ์ด์ ๋น ๋ฐฐ์ด์ ๋ฃ์ด ์ฃผ๋ฉด ๋ฉ๋๋ค. ์ด๋ ํด๋น useEffect ํจ์๊ฐ ์ปดํฌ๋ํธ ์์ ์ด๋ ํ ๊ฒ์๋ ์์กดํ์ง ์์์ ๋ํ๋ด์ด ์ค๋๋ค.
๋ค์ ์๋์ ์์ ์ฝ๋๋ฅผ ํตํ์ฌ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์๋์ ์์ ์ฝ๋์์๋ ๊ธฐ์กด์ ์์ ์ฝ๋์์ useEffect Hook์ ๋ ๋ฒ์งธ ์ธ์๋ก ๋น ๋ฐฐ์ด๋ง ์ถ๊ฐํ์์ต๋๋ค.
ย
ex. ์ต์ด ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ฒฝ์ฐ(๋ง์ดํธ ๋๋ ๋)์๋ง useEffect Hook์ด ๋์ํ๋ ์
// Section4.js import React, { useEffect, useState } from "react"; const Section4 = () => { const [count, setCount] = useState(0); useEffect(() => { console.log("๋ ๋๋ง ๋๊ณ ์๋์? ๐ค"); }, []); return ( <div> <h2>ํด๋ฆญํ ํ์: {count}</h2> <button type="button" onClick={(e) => setCount((count) => count + 1)}> Click Me! </button> </div> ); }; export default Section4;
ย
์์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ ๋ค, ๋ธ๋ผ์ฐ์ ํ๋ฉด๊ณผ ์ฝ์์ฐฝ์ ํ์ธํ๋ฉด ์๋ ๊ทธ๋ฆผ 3-6๊ณผ ๊ฐ์์ ํ์ธํ ์ ์์ต๋๋ค.
ย
ย
์์ 3.3์ ์์ ์ดํด๋ณธ ๊ฒ๊ณผ ๊ฐ์ด ์ต์ด ๋ ๋๋ง ์์ ์์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋๋ฉฐ useEffect()๊ฐ ๋์ํ์์์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ ์ฐ๋ฆฌ๊ฐ ์ด๋ฏธ ๊ด์ฐฐํ ๋ฐ์ ๊ฐ์ต๋๋ค.
์ด์ ๋ฒํผ์ ํด๋ฆญํ์ฌ count ๋ณ์์ ๊ฐ์ ๋ณ๊ฒฝ์์ผ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฆฌ๋ ๋๋ง์ด ๋๋๋ก ํด๋ณด๊ฒ ์ต๋๋ค.
ย
ย
useEffect Hook์ ๋ ๋ฒ์งธ ์ธ์๋ก ๋น ๋ฐฐ์ด์ ๋ฃ๊ธฐ ์ ๊ณผ๋ ๋ค๋ฅธ ๊ฒฐ๊ณผ๊ฐ ๋ํ๋จ์ ํ์ธํ ์ ์์ต๋๋ค. ์ฆ ์ฝ์์ฐฝ์ โ๋ ๋๋ง ๋๊ณ ์๋์? ๐คโ๊ฐ ํ ๋ฒ ๋ ์ถ๋ ฅ๋์ง ์์ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ useEffect์ ์ฝ๋ฐฑํจ์๊ฐ ๋์ํ์ง ์์์์ ๋ณด์ฌ์ค๋๋ค. ์ฐ์ฐ์ผ์ง๋ ๋ชจ๋ฅด๋ ํ ๋ฒ ๋ ๋ฒํผ์ ํด๋ฆญํด๋ด
๋๋ค.
ย
ย
๋ ๋ฒ์งธ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์์๋ ๋ถ๊ตฌํ๊ณ ์ฝ์์ฐฝ์ โ๋ ๋๋ง ๋๊ณ ์๋์? ๐คโ๊ฐ ์ถ๋ ฅ๋์ง ์์ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
์์ ์ดํด๋ณธ 3.3์ ์ ๋ด์ฉ๊ณผ ๊ฐ์ด, useEffect Hook์ ๋ ๋ฒ์งธ ์ธ์(argument)๋ฅผ ํ ๋นํ์ง ์์ ๊ฒฝ์ฐ, useEffect ์์ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ฃผ์ด์ง ์ฝ๋ฐฑํจ์๋ ๋ฆฌ๋ ๋๋ง๋ ๋๋ง๋ค ์คํ๋๋ค๋ ๊ฒ์ 3.3์ ์ ์์ ์ฝ๋๋ฅผ ํตํด ํ์ธํ ์ ์์์ต๋๋ค.
๋ฐ๋ฉด, ์ด๋ฒ์๋ ์ด useEffect Hook์ ๋ ๋ฒ์งธ ์ธ์๋ก ๋น ๋ฐฐ์ด์ ๋ฃ์ด์ค์ผ๋ก์จ ์ปดํฌ๋ํธ๊ฐ ์ต์ด๋ก ๋ง์ดํธ ๋์์ ์์ ์์๋ง ์ฝ๋ฐฑํจ์๊ฐ ๋์ํ๊ณ , ๊ทธ ์ดํ์๋ ๋์ํ์ง ์๊ฒ ๋์์์ ํ์ธํ์์ต๋๋ค.
ย
3.2.3 ํน์ ๊ฐ์ด ์ ๋ฐ์ดํธ ๋ ๋ ๋์ํ๋ useEffect
ย
3.3์ ๊ณผ ๊ฐ์ด ๋งค๋ฒ ๋ ๋๋ง ๋ ๋๋ง๋ค useEffect Hook์ด ๋์ํ๊ณ ์ฝ๋ฐฑํจ์์ console.log๊ฐ ์๋ ๋ฌด๊ฑฐ์ด ์์
์ด ๋ฐ๋ณต๋๋ค๋ฉด ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐ์ ์ํฌ ์๋ ์๊ณ ๊ต์ฅํ ๋นํจ์จ์ ์ผ ๊ฒ์
๋๋ค. ํน์ ๊ฐ์ด ๋ณํํ ๋๋ง useEffect Hook์ ์คํ์ํค๊ณ ์ถ๋ค๋ฉด ์ฒซ ๋ฒ์งธ ์ธ์์ ์ฝ๋ฐฑํจ์, ๋ ๋ฒ์งธ ์ธ์์ธ ์์กด์ฑ ๋ฐฐ์ด์ useState ์ํ๋ props๋ก ๋ฐ์ ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ๋ ๋ฒ์งธ ์ธ์์ ๊ฐ์ด ํฌํจ๋ ๋ฐฐ์ด์ด ๋ค์ด๊ฐ๋ฉด ์ฒ์ ๋ ๋๋ง ๋ ๋, ๋ฐฐ์ด ์์ ๊ฐ์ด ์
๋ฐ์ดํธ ๋ ๋ useEffect Hook์ด ์คํ๋ฉ๋๋ค.
ย
ex. ํน์ ๊ฐ์ด ์
๋ฐ์ดํธ ๋ ๋ useEffect Hook์ด ๋์ํ๋ ๊ฒฝ์ฐ
import React, { useState, useEffect } from "react"; const Section5 = () => { const [text, setText] = useState(""); const textChange = (event) => { setText(event.target.value); }; useEffect(() => { console.log("๋ ๋๋ง ๋๊ณ ์๋์?"); }, []); useEffect(() => { console.log("text๊ฐ ๋ณํ๊ณ ์๋์?"); }, [text]); return ( <div> <input type="text" value={text} onChange={textChange} /> <p>์ ๋ ฅํ ๋ฌธ๊ตฌ : {text}</p> </div> ); }; export default Section5;
ย
input ์ฐฝ์ ๋ฌธ๊ตฌ๋ฅผ ์
๋ ฅํ๋ฉด ์
๋ ฅํ ๊ทธ๋๋ก ํ๋ฉด์ ์ถ๋ ฅ๋๋ ์ฝ๋์
๋๋ค.
ย
์ต์ด ๋ ๋๋ง ์ ํ๋ฉด์
๋๋ค. ์ฝ์ ์ฐฝ์ โ๋ ๋๋ง์ด ๋๊ณ ์๋์?โ์ โtext๊ฐ ๋ณํ๊ณ ์๋์?โ๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ํ์๋์ด ์์ต๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋ ๋ ๋ ๊ฐ์ useEffect Hook์ด ์ ์์ ์ผ๋ก ๋์ํ๊ณ ์๋ค๋ ๊ฒ์ ์ ์ ์์ต๋๋ค.
ย
ย
input ์ฐฝ์ hi๋ฅผ ์
๋ ฅํ์ต๋๋ค. ๋ ๋ฒ์งธ ์ธ์์ ๋น ๋ฐฐ์ด์ ๋ฃ์ด์ค ์ฒซ ๋ฒ์งธ useEffect Hook์ ๋ ์ด์ ๋์ํ์ง ์๊ณ text ๊ฐ์ ๋ณํ์ ๋ฐ๋ผ ๋ ๋ฒ์งธ useEffect Hook๋ง h๋ฅผ ์
๋ ฅํ์ ๋ ํ ๋ฒ, i๋ฅผ ์
๋ ฅํ์ ๋ ํ ๋ฒ ์ด ๋ ๋ฒ ๋์ํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. text ๊ฐ์ ์กฐ๊ธ ๋ ๋ณํ ์์ผ ๋ณด๊ฒ ์ต๋๋ค.
ย
ย
input ์ฐฝ์ ๊ณต๋ฐฑ๊ณผ hello๋ฅผ ์ถ๊ฐ๋ก ์
๋ ฅํ์ต๋๋ค. ๊ทธ๋ฆผ 3-10์ ๋ง์ฐฌ๊ฐ์ง๋ก โtext๊ฐ ๋ณํ๊ณ ์๋์?โ๋ผ๋ ๋ฌธ์ฅ๋ง ์ถ๊ฐ๋ก ์ฝ์ ์ฐฝ์ ํ์๋๊ณ ์์ต๋๋ค. ์ด์ฒ๋ผ ๋ ๋ฒ์งธ ์ธ์์ ๊ฐ์ ๋ฃ์ผ๋ฉด ์ต์ด ๋ ๋๋ง ๋ ์ฝ๋ฐฑํจ์๊ฐ ํ ๋ฒ ๋์ํ๊ณ React๊ฐ ๋ ๋ฒ์งธ ์ธ์์ ์ํ๋ฅผ ๋์์์ด ์ถ์ ํ์ฌ ์ํ๊ฐ ๋ณํํ ๋ ๋ง๋ค useEffect์ ์ฝ๋ฐฑํจ์๊ฐ ๋ค์ ๋์ํ๊ฒ ๋๋ค๋ ์ฌ์ค์ ํ์ธํ ์ ์์ต๋๋ค.
ย
3.2.4 clean-up ํ๋ useEffect
ย
๋ถ์ ํจ๊ณผ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ฑฐํ ๋ ์ข
์ข
์ ๋ฆฌ๊ฐ ํ์ํฉ๋๋ค. ์ด๋ฅผ ์ํด ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ๋๋ฉด ๋ ์ด์ ํ์์๋ ๋ฆฌ์์ค๋ฅผ ์ ๋ฆฌํ๋ ๋ชฉ์ ์ผ๋ก ์ ๋ฆฌํจ์๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด ํ์ด๋จธ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ ๊ฒฝ์ฐ ํ์ด๋จธ ๋ฆฌ์
์ ์ํด ์ด์ ๊ธฐ๋ก์ ์ ๋ฆฌํด์ผ ํฉ๋๋ค. ์ด ๋ ์ ๋ฆฌ ํจ์๋ฅผ ๋ฐํํ์ฌ ์ด์ ์์
์ ์ ๊ฑฐํ ์ ์์ต๋๋ค.
ย
useEffect(()=> { return () => { //cleanUp } }, [state, props.a])
ย
๋จผ์ ์ ๋ฆฌํจ์๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ์์ ์ดํด๋ณด์๋ฏ ์ ์ฝ๋์ ๊ฐ์ต๋๋ค. useEffect ๋ด๋ถ์์
return
ํค์๋์ ํจ๊ป ๋ฐํํ๊ณ ์ถ์ ์ ๋ฆฌํจ์๋ฅผ ๋ฃ์ผ๋ฉด ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ ๋ ํ ์ ๋ฆฌํจ์๊ฐ ์คํ๋ฉ๋๋ค.ย
function Timer() { console.log("ํ์ด๋จธ ์คํ ์ "); useEffect(() => { const timer = setInterval(() => { console.log("ํ์ด๋จธ ์งํ"); }, 1000); return () => { clearIneterval(timer); console.log("ํ์ด๋จธ ์ข ๋ฃ"); }; }); return <p>ํ์ด๋จธ ์งํ ์ค</p>; }
ย
์ ์ฝ๋๋
setInterval
์ ์ฌ์ฉํ์ฌ 1์ด๋ง๋ค ์ฝ์์ โํ์ด๋จธ ์งํโ์ด ๋์ค๋๋ก ๋ง๋ ํ์ด๋จธ ํจ์์
๋๋ค. ํ์ด๋จธ ํจ์์์ useEffect๋ clearIneterval
์ ์ ๋ฆฌ ํจ์์ ๋ด์ ๋ฐํํฉ๋๋ค. ๋ง์ฝ ์ ๋ฆฌํจ์๋ฅผ ๋ฐํํ์ง ์๋๋ค๋ฉด ํ์ด๋จธ ์ข
๋ฃ ๋ฒํผ์ ๋๋ฌ๋ ์ข
๋ฃ๋์ง ์์ต๋๋ค. ๋ฟ๋ง ์๋๋ผ ์์
์ด ๊ณ์ ๋์ ๋์ด ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ํ์ด๋จธ ์คํ ๊ฐ๊ฒฉ์ด ๋ฌ๋ผ์ง๋๋ค. ์๋ ์ฝ๋๋ก ๋ฒํผ์ ๋ง๋ค์ด ์ ๋ฆฌ ํจ์๋ฅผ ๋ฐํํ ๋์ ๋ฐํํ์ง ์์ ๋๋ฅผ ๋น๊ตํด๋ณด๊ฒ ์ต๋๋ค.ย
function App() { const [startTimer, setStartTimer] = useState(false); return ( <> {startTimer && <Timer /> ? ( startTimer && <Timer /> ) : ( <p>ํ์ด๋จธ ์คํ ์ค๋น</p> )} <button onClick={() => setStartTimer(!startTimer)}>Timer</button> </> ); }
ย
ํ์ด๋จธ ์คํ ์ฌ๋ถ๋ฅผ ํ์ธํ๊ธฐ ์ํด App ์ปดํฌ๋ํธ์ ๋ฒํผ์ ๋ง๋ค์์ต๋๋ค. ๋ฒํผ์ ๋๋ฌ ํ์ด๋จธ๊ฐ ์์ํ๋ค๋ฉด ์๋ ์ฌ์ง์ฒ๋ผ ๋ธ๋ผ์ฐ์ ์ โํ์ด๋จธ ์งํ ์คโ์ด ๋จ๊ณ ๊ทธ๋ ์ง ์๋ค๋ฉด โํ์ด๋จธ ์คํ ์ค๋นโ๊ฐ ๋ํ๋ฉ๋๋ค. ๋จผ์ ์ ๋ฆฌํจ์๋ฅผ ๋ฐํํ๋ ๊ฒฝ์ฐ ์ฝ์์ฐฝ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ๋ฒํผ์ ๋๋ฅด์ โํ์ด๋จธ ์งํ ์ โ์ด ์ฝ์์ฐฝ์ ์ฐํ๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ๊ทธ ํ ํ์ด๋จธ๊ฐ 5์ด ์ ๋ ์งํ๋๋ฉฐ ์ฝ์์ โํ์ด๋จธ ์งํ ์คโ์ด 5๋ฒ ๋ํ๋ฉ๋๋ค. ๋ง์ง๋ง์ผ๋ก ๋ฒํผ์ ๋๋ฅด๋ฉด ํ์ด๋จธ๊ฐ ์ข
๋ฃ๋๊ณ ๊ทธ๊ฒ์ ์ฝ์์ฐฝ์์ ํ์ธ ๊ฐ๋ฅํฉ๋๋ค. useEffect๊ฐ ์ ๋ฆฌํจ์๋ฅผ ๋ฐํํ๋ฉด
clearIneterval
๋ก ์ธํด ํ์ด๋จธ๊ฐ ์ข
๋ฃ๋๊ณ 1์ด ๊ฐ๊ฒฉ์ผ๋ก ์งํ๋๋ ์์
์ ์ญ์ ๋ฉ๋๋ค. ๊ทธ๋์ ๋ฒํผ์ ๋ค์ ํ ๋ฒ ๋ ๋๋ ์ ๋ ํ์ด๋จธ๊ฐ ์ ์์ ์ผ๋ก 1์ด๋ง๋ค ์งํ๋ฉ๋๋ค.ย
ย
์ ๋ฆฌํจ์๋ฅผ ๋ฐํํ์ง ์๋ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์๋ ์ฝ๋๋ฅผ ๋ณด๋ฉด useEffect์์ return์ผ๋ก ๋ฐํ๋๋ ํจ์๊ฐ ์์ต๋๋ค. ๊ทธ๋ก ์ธํด ์ปดํฌ๋ํธ๊ฐ ์ธ๋ง์ดํธ ๋์ด๋ ์ด์ ๋ถ์ ํจ๊ณผ์ ๊ธฐ๋ก์ด ์ ๋ฆฌ๋์ง ์์ต๋๋ค.
ย
function Timer() { console.log("ํ์ด๋จธ ์คํ ์ "); useEffect(() => { const timer = setInterval(() => { console.log("ํ์ด๋จธ ์งํ"); }, 1000); return <p>ํ์ด๋จธ ์งํ ์ค</p>; }
ย
์ ๋ฆฌํจ์๊ฐ ์์ด๋ ๋ฒํผ์ ๋๋ ์ ๋ ๋ธ๋ผ์ฐ์ ์ ๋ํ๋๋ ๋ชจ์ต์ ๋์ผํฉ๋๋ค. ํ์ง๋ง ์๋ ๊ทธ๋ฆผ 3-17 ์ฝ์์ฐฝ์ ๋ณด๋ฉด ํ์ด๋จธ ์งํ์ด ๋ฉ์ถ์ง ์๊ณ ๊ณ์ ์คํ๋ฉ๋๋ค. ๋ํ ์คํ ๊ธฐ๋ก์ด ๊ณ์ ์์ด๊ธฐ ๋๋ฌธ์ ํ์ด๋จธ ์คํ ๊ฐ๊ฒฉ์ด ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์ผ์ ํ์ง ์์ ๊ฒ์ ์ ์ ์์ต๋๋ค. ์ฒ์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด 1์ด๋ง๋ค ํ์ด๋จธ๊ฐ ์คํ๋์ง๋ง ๋ ๋ฒ, ์ธ ๋ฒ ๋ฐ๋ณตํด์ ๋๋ฅผ ๋๋ง๋ค ๋ ๋น ๋ฅธ ์๋๋ก ์ฝ์์ โํ์ด๋จธ ์งํ ์คโ์ด ๋ํ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์ ๋ฆฌํจ์๋ฅผ ๋ฐํํ์ง ์์ผ๋ฉด ์์
์ด ๋์ ๋์ด ํ์ด๋จธ ๊ฐ๊ฒฉ์ด ๋ฌ๋ผ์ง๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ๊ฒฐ๊ตญ ์ ๋ฆฌ๋ฅผ ํ์ง ์๋ ๊ฒฝ์ฐ ๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์ํ์ฌ ๋ถํ์ํ๊ฒ ๋ฉ๋ชจ๋ฆฌ๊ฐ ๋ญ๋น๋ฉ๋๋ค. ๋ฐ๋ผ์ ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฐฉ์ง๋ฅผ ์ํด์๋ ์ ๋ฆฌ ๊ณผ์ ์ ํ์ํฉ๋๋ค.
ย
์ ๋ฆฌ ํจ์๋ ํด๋์ค์ Hook์์ ๋ชจ๋ ์ฌ์ฉ๊ฐ๋ฅํฉ๋๋ค. ํด๋์ค ์ปดํฌ๋ํธ์์ ์ ๋ฆฌ ํจ์๋ฅผ ์ฌ์ฉํ ๋๋
componentDidMount
์์ ๊ธฐ๋ฅ์ ๊ตฌํํ๊ณ componentWillUnmount
์์ ์ ๋ฆฌํฉ๋๋ค. ๋ฐ๋ฉด ํจ์ ์ปดํฌ๋ํธ์์๋ useEffect Hook์ด ์ ๋ฆฌ ํจ์๋ฅผ ๋ฐํํฉ๋๋ค. ์ ๋ฆฌ๋ฅผ ํ๊ธฐ ์ํด ๋ณ๋์ ๋ถ์ ํจ๊ณผ๋ ํ์ํ์ง ์์ต๋๋ค. ๋ถ์ ํจ๊ณผ๊ฐ ํจ์๋ฅผ ๋ฐํํ๋ฉด ์ ๋ฆฌ๊ฐ ํ์ํ ์์ ์ React๊ฐ ์ ๋ฆฌ ํจ์๋ฅผ ์คํ์ํต๋๋ค. React๋ ๋ง์ดํธ๊ฐ ํด์ ๋๊ณ ์ ๋ฆฌ๋ฅผ ์์ํฉ๋๋ค. ๋ค๋ง ๋ ๋๋ง๋ ๋๋ง๋ค ๋ถ์ ํจ๊ณผ๊ฐ ์คํ๋๊ธฐ ๋๋ฌธ์ React๋ ๋ค์ ๋ถ์ํจ๊ณผ๊ฐ ์คํ๋๊ธฐ ์ ๊น์ง ์ด์ ๋ ๋๋ง์ ์ ๋ฆฌ๋ฅผ ๋ง๋ฌด๋ฆฌํฉ๋๋ค. ํ์ด๋จธ ์ฝ๋๋ฅผ ์๋ก ๋ค์ด ์ค๋ช
ํด๋ณด๊ฒ ์ต๋๋ค. ย
function Timer() { useEffect(() => { const timer = setInterval(() => {}, 1000); console.log("๋ง์ดํธ ๋ ๋ ์คํ"); return () => { console.log("์ธ๋ง์ดํธ ๋ ๋ ์คํ"); clearInterval(timer); }; }); return <p>ํ์ด๋จธ</p>; }
ย
์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ๋ ์ฝ์์ โ๋ง์ดํธ ๋ ๋ ์คํโ์ด ๋ํ๋ฉ๋๋ค. ํ์ด๋จธ๊ฐ ์คํ๋๊ณ ๋ฒํผ์ ๋ค์ ๋๋ฅด๋ฉด ์ฝ์์ "์ธ๋ง์ดํธ ๋ ๋ ์คํ"์ด ๋ํ๋๊ณ ํ์ด๋จธ๋ ์ข
๋ฃ๋ฉ๋๋ค. ๊ฒฐ๊ตญ ํจ์๊ฐ ์ธ๋ง์ดํธ ๋๊ณ ๋์ ์ ๋ฆฌํจ์๊ฐ ๋ฐํ๋๋ ๊ฒ์ ์ ์ ์์ต๋๋ค. ์๋ ๊ทธ๋ฆผ 3-18 ์ฝ์์ฐฝ์ ํตํด ์ ๊ณผ์ ์ด ์ ๋๋ก ์คํ๋์์์ ํ์ธ ๊ฐ๋ฅํฉ๋๋ค.
ย
ย
ย
ย