노마드와 함께하는 Hooks -3 (useEffect)

이번엔 useEffect 공부를 해보겠습니다. 먼저 기본 코드입니다.

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

const App = () => {
  const sayHello = () => console.log("hello");
  useEffect(() => {
    sayHello();
  });
  return <div />;
};

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

 

useEffect는 간단합니다. componentDidmount , componentWillUnmout 같은 행동을 해줍니다.

실행해보시면 hello가 저장하기도 전에 튀어나옵니다.

 

그리고 또 하나의 코드입니다.

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>
      <h1>Hi</h1>
      <button onClick={() => setNumber(number + 1)}>{number}</button>
      <button onClick={() => setAnumber(aNumber + 1)}>{aNumber}</button>
    </div>
  );
};

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

 

버튼 추가하고 누르면 넘버 나오는 아~주 초 기본적인 내용입니다.

이제 눌러보면 아시겠지만 콘솔에 계속 찍히죠? didmount든 update든 역활을 충실히 하고 있는겁니다.

 

여기에 이제 state의 number변수 값만 바뀌었을때 실행되게 해봅시다. 간단합니다.

  useEffect(() => {
    sayHello();
  }, [number]);

 

이렇게 바꾸어주시면 됩니다.

useEffect에는 파라미터가 두개가 있는데요.

1번 파라미터가 effect인 function이구요. 2번째 파라미터는 배열로 전달하는데, 안에 넣은 값이 있으면 그 값이 바뀔때만 실행합니다. [] 이렇게 빈걸로 두면 맨 처음 didmount외에는 단 한번도 일어나지 않게 됩니다.

 

이렇게 써도 됩니다.

useEffect(sayHello,[number])

 

 

그리고 이걸 이용한 대망의 코드 (useTitle)

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

const useTitle = initialTitle => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);
  return setTitle;
};

const App = () => {
  const titleUpdater = useTitle("Loading...");
  setTimeout(() => titleUpdater("Home"), 3000);
  return (
    <div>
      <h1>Hi</h1>
    </div>
  );
};

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

 

아까 useEffect를 모를땐 changeItem 같은걸 리턴해서 접근했는데,

이걸 이용하면 간단하게 바꿀 수 있습니다.