Hooks - useEffect, 의존성 배열(dependency array)

Hooks - useEffect, 의존성 배열(dependency array)

 

---

useEffact

렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅

• 컴포넌트가 화면에 보여졌을 때
• 컴포넌트가 화면에서 사라졌을 때(return)

 

App.jsx

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

function App() {
  const [value, setValue] = useState('')
  useEffect(() => {
    console.log('hello useEffect!');
  });
  return (
    <div>
      <input
        type='text'
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  )
}

export default App

---

의존성 배열

dependency array

이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행

 

App.js

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

function App() {
  const [value, setValue] = useState('')
  useEffect(() => {
    console.log(`hello useEffect! : ${value}`);
  }, [value]);
  return (
    <div>
      <input
        type='text'
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  )
}

export default App

---

clean up

 

App.jsx

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

function App() {
  const [value, setValue] = useState('');
  useEffect(() => {
    console.log(`hello useEffect! : ${value}`);

    return () => {
      console.log('나 사라져요!');
    }
  }, [value]);
  return (
    <div>
      <input
        type='text'
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  )
}

export default App