[React] useEffect를 이용한 DOM조작

안녕하세요, 피터팬입니다!

오늘은 useEffect에 대해 알아볼건데요.

 

useEffect는 side effect(컴포넌트 안에 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업)를 수행할 수 있게 해줍니다.

 

적용법

import { useEffect } from "react";

 

사전 지식

Component의 LifeCycle ; Mount -> Update(Rerendering) -> Unmount

 

사용법

값이 변경되면 callback function 실행

useEffect(()=>{ callback function }, [ 값 ]);

상황에 따른 사용법입니다.

 

1. mount되면 실행 ; x

useEffect(() => {
	console.log("Mount!")
})

 

2. count값이 변경되면(update되면) 실행 ; [ count ]

const [count, setCount] = useState(0)
useEffect(() => {
	console.log('count')
},[count])
<button onClick={() => setCount(count+1)}>+</button>

 

2-1. text값이 변경되면(update되면) 실행 ; [ text ]

const [text,setText] = useState("");
useEffect(() => {
	console.log("text")
},[text])
<input value = {text} onChange = (e) => {setText(e.target.value)}/>

 

3. Unmount되면 실행 ; [ ]

useEffect(() => {
	console.log("Mount!")
    return () => {
    	console.log("UnMount!")
    }
},[])

 

 

예시

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

const Test = () => {
  const [count, countUp] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count}times`;
  });

  return (
    <div>
      <div className="abc" onClick={() => countUp(count + 1)}>
        {count}
      </div>
    </div>
  );
};

export default Test;

- button을 누를때마다 제목이 바뀜 ; 렌더링 할 때 마다 실행이 됩니다.

 

---

Reference

https://ko.reactjs.org/docs/hooks-effect.html