(React) 리액트 useEffect 사용법

---

(React) 리액트 useEffect 사용법

---

* 이 포스팅은 "리액트를 다루는 기술"책 & 생활코딩님의 강의를 보고 복습겸 정리한 포스팅 입니다.

 

클래스형 컴포넌트에서는 라이프사이클을 사용하지만, 

함수형 컴포넌트에서는 라이프사이클을 사용할 수 없습니다. 그대신 Hook을 사용합니다.

많은 Hook들이 있지만 그 중 useEffect에 대해 정리해 보았습니다.  

---

1) useEffect가 필요한 이유

컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다

실행시키고 싶은 작업이 있을 시 useEffect를 사용할 수 있습니다.

 

2) useEffect란?

클래스형 라이프사이클로 따지면 componentDidMount, componentDidUpdate, compoenntWillUnMount를 합친 것.

componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.

componentDidUpdate: 리렌더링을 완료 한 후 실행. 즉 render()가 업데이트 될 때마다 실행

compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행.

 

3) useEffect 동작 과정

<다향한 형식으로 쓰이는 useEffect 한번에 보기>

/*첫 번째*/
useEffect(()=>{
  //작업 내용
});

/*두 번째*/
useEffect(()=>{
 document.title = number
},[number]);

/*세 번째*/
useEffect(()=>{
  //작업 내용
},[]);

/*네 번째*/
useEffect(()=>{
  //작업 내용
  return ()=>{
  	//unmount
  };
});

---

1) 첫 번째 형식

/*첫 번째*/
useEffect(()=>{
  //작업 내용
});

> 렌더링이 완료될 때마다 실행.

 

import React, { useEffect, useState } from "react";

const UseEffect = () => {
  const [text, setText] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  useEffect(() => {
    console.log("렌더링이 완료될 때마다 실행합니다.");
  });

  return (
    <div>
      <input value={text} onChange={onChange} />
    </div>
  );
};

export default UseEffect;

처음 렌더링이 완료된 후 useEffect함수가 실행되고, 

input에 글자를 쓸 때마다 렌더링 되므로, 업데이트 사항이 있을때 마다 useEffect 함수가 실행됩니다.

---

2) 두 번째 형식

/*두 번째*/
useEffect(()=>{
 document.title = number
},[number]);

> 첫 렌더링 후 한번 실행, 그 후에는 []<-안의 값이 없데이트 될 때만 실행.

 

import React, { useEffect, useState } from "react";

const UseEffect = () => {
  const [text, setText] = useState("");
  const [message, setMessage] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onChange2 = (e) => {
    setMessage(e.target.value);
  };
  useEffect(() => {
    console.log(text);
    console.log("렌더링이 완료될 때마다 실행합니다.");
  }, [text]); //text가 업데이트될 때마다 실행

  return (
    <div>
      <input value={text} onChange={onChange} />
      <input value={message} onChange={onChange2} />
    </div>
  );
};

export default UseEffect;

 

아래 사진을 보면 첫 렌더링 완료후 useEffect한번 실행,

message가 업데이트 될때는 실행 안함.

 

아래 사진을 보면, text가 업데이트될 때마다 useEffect함수 실행.

---

3) 세 번째 형식

/*세 번째*/
useEffect(()=>{
  //작업 내용
},[]);

> [] <-안에 아무것도 없으므로 첫 렌더링 완료 후만 실행. 

 

---

4) 네 번째 형식

/*네 번째*/
useEffect(()=>{
  //작업 내용
  return ()=>{
  	//unmount
  };
});

>처음 렌더링 된 후 실행, 그 후에는 렌더링 완료후 뒷정리 함수 반환 후에 실행

 

import React, { useEffect, useState } from "react";

let num = 0;
const UseEffect = () => {
  const [text, setText] = useState("");
  const [message, setMessage] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onChange2 = (e) => {
    setMessage(e.target.value);
  };

  useEffect(() => {
    console.log("렌더링이 완료될 때마다 실행합니다." + num++);
    return () => {
      console.log("cleanup");
    };
  });

  return (
    <div>
      <input value={text} onChange={onChange} />
      <input value={message} onChange={onChange2} />
    </div>
  );
};

export default UseEffect;

 

아래 사진을 보면, 첫 렌더링때 useEffect함수를 실행 한다.

그리고 컴포넌트가 업데이트 사항이 있을시, 렌더링 완료후 cleanup을 해준 후, useEffect함수를 실행한다.