[리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useEffect

노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.

nomadcoders.co/

 

노마드 코더의 실전형 리액트 Hooks 10개 강의를 듣던중 useState는 상대적으로 쉬운 반면에 useEffect부분부터는 조금 복잡하고 어려운 것 같아 블로그에 강의를 정리해서 남기기로 했다.

 

[예제 코드]

 

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

const App = () => {
  const sayHello = () => console.log("hello");
  const [number, setNumber] = useState(0);
  const [aNumber, setAnumber] = useState(0);
  useEffect(sayHello, [number];
  return (
    <div className="App">
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

728x90

[강의 설명]

 

useEffect는 *componentWillUnmount와 *componentDidMount, *componentDidUpdate와 동일한 function이다.

useEffect는 componentDidMount의 역할을 해서 새로고침을 하면 sayHello를 실행한다.

하지만 componentDidUpdate의 역할도 하기 때문에 클릭하면 sayHello를 실행한다.

useEffect는 2개의 인자를 받는데 첫번째는 function으로써의 effect이다.

그래서 useEffect(sayHello);로 실행 가능함.

두번째 인자는 dependency로써 인자가 있을 때만 값이 변화하게 된다.

만약에 useEffect(sayHello, 값) 이렇게 값이 존재하면 해당 값이 변화할거고 그리고나서 useEffect가 활성화 될 것이다.

하지만 여기서 useEffect(sayHello, []) 이런식으로 빈 배열을 입력해주면 어떤 변화가 일어나던 활성화 되지 않는다.

반대로 useEffect(sayHello)만 입력해주면 모든 변화마다 useEffect가 활성화가 된다.

 

해당 코드에서는 useEffect로 부터 function이 리턴되는데, 그리고 이건 componentWillUnmount이다.

이 코드에서는 설명이 불가하므로 다음 강의에서 설명해주기로 함!

 

---

 

*componentDidMount 메서드란?

  : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행하는 메서드로, 이 안에서 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청과 같은 비동기 작업을 처리하면 된다.

 

*componentDidUpdate 메서드란?

 : 리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방하며, prevProps 또는 prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다.

 

*componentWillUnmount 메서드란?

 : 컴포넌트를 DOM에서 제거할 때 실행하며, componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해주어야한다.

 

 

※참고문헌: 김민준. 리액트를 다루는 기술, 개정판. (주)도서출판 길벗. 2019.