[React/실전형 리액트 Hooks/노마드코더] #2 USEEFFECT

 

강의출처

 

https://youtu.be/qTpUvdjO0PE

 

 

 

 

---

 

useEffect

 

 

useEffect는 React Hooks API 중 하나로, 함수형 컴포넌트에서 부작용(side effect)을 처리할 때 사용된다.

부작용이란, 컴포넌트의 상태(state)나 프로퍼티(props) 이외의 외부 요인에 의해 발생하는 작업을 말한다.

예를 들면, API 호출, 타이머 설정, 이벤트 리스너 등이 있다.

 

useEffect는 컴포넌트가 렌더링 될 때마다 실행된다.

이후, 의존성 배열(deps)에 지정된 값이 변경되면 다시 실행된다.

 

이때, 첫 번째 인자로 전달된 콜백 함수가 실행되며, 부작용을 처리한다.

부작용을 처리하는 콜백 함수에서는, 주로 상태를 업데이트하거나, 외부 요인에 의해 발생한 작업을 수행한다.

 

useEffect는 clean-up 함수도 제공한다.

clean-up 함수는, 부작용을 처리하는 콜백 함수가 다음으로 실행되기 전에 호출되며,

부작용을 제거하거나, 리소스를 정리하는 등의 작업을 처리하다.

clean-up 함수는, 두 번째 인자로 전달된 배열에 이전 상태와 비교하여 변화가 있는 값이 있을 경우 실행된다.

 

예를 들어, useEffect를 사용하여 API 호출을 처리하는 경우,

clean-up 함수에서는 API 요청을 취소하거나, 처리되지 않은 결과를 제거하는 등의 작업을 수행할 수 있다.

이렇게 함으로써, 메모리 누수(memory leak)나 오작동 등을 방지할 수 있다.

 

 

useEffect()는 componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다.

 

 

 

 

---

 

 

간단한 예제 코드

 

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const sayHello = () => console.log("hello");
  useEffect(() => {
    sayHello();
  });
  const [number, setNumber] = useState(0);
  const [aNumber, setaNumber] = useState(0);
  return (
    <div className="App">
      <div>Hi</div>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setaNumber(aNumber + 1)}>{aNumber}</button>
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

이 코드는 React Hooks API 중 하나인 useEffect를 사용하는 간단한 예제이다.

처음에 sayHello라는 함수를 정의하고, useEffect에서는 이 함수를 호출한다.

useEffect는 컴포넌트가 렌더링 될 때마다 실행되므로, 여기서는 컴포넌트가 렌더링될 때마다 sayHello 함수가 실행된다.
그다음에는 useState를 사용하여 number와 aNumber라는 두 개의 상태를 관리하고 있다.

number 상태는 버튼을 클릭할 때마다 1씩 증가하며, aNumber 상태는 다른 버튼을 클릭할 때마다 1씩 증가한다.

마지막으로, JSX를 사용하여 화면에 버튼 두 개와 "Hi"라는 텍스트를 출력하고 있다.

 

첫 번째 버튼은 number 상태를 표시하고, 클릭할 때마다 setNumber 함수를 호출하여 number 상태를 업데이트한다.

 

두 번째 버튼도 마찬가지로 aNumber 상태를 표시하고,

클릭할 때마다 setaNumber 함수를 호출하여 aNumber 상태를 업데이트한다.

따라서, 이 코드는 컴포넌트가 렌더링 될 때마다 sayHello 함수를 실행하고, 두 개의 버튼을 클릭하면 각각의 상태를 증가시킨다.

 

 

실행결과

 

 

 

 

다음 포스팅에서 useEffect를 사용한 hooks을 작성해 보도록 하자 !