내용 목차
리액트에서는 state값이 바뀌면 무조건 해당 컨포넌트에 있는 모든 것들이 다시 실행된다. 그런데 특별한 경우에만 실행되고 그 외의 경우에는 실행되지 않게 하려면 어떻게 해야 할까?
예를 들면 특정 url에 접속해서 데이터를 가져오는(fetching) 코드 같은 것들이다. 이 코드는 다른 state(변수의 값이)가 변경된다고 해서 굳이 새로 실행(렌더링)될 필요가 없는 코드이다.
만약 이런 시간이 걸리는 작업들이 아무 관계도 없는 state변수의 내용이 바뀜에 따라 그때마다 계속 재실행된다면 비효율적일 수 밖에 없다.
이런 경우를 회피하기 위해 React에서는 useEffect 라는 것을 두고 있다. 즉, useEffect는 특정한 조건에서만 특정 함수가 실행되게 하는 도구이다. 오늘은 useEffect에 대해 알아보자.
React ustEffect는 두 개의 인자만 갖는다
`useEffect(함수,[디펜던시])`
- function(함수) 인자 – 디펜던시가 변하면 할 일을 기록한 함수.
- 디펜던시 인자 – 내용이 변하는 변수(state)들
첫번째 인자인 함수는 그냥 할일이다. [디펜던시]가 변할 때마다 실행되는 함수이다.
두번째 인자는 배열형태로 여러개의 state변수를 넣을 수 있다.
* [] 빈값이면 리액트가 최초로 구동될때 딱 한번만 실행된다.
* [fruit]라는 인자가 들어가 있으면 fruit가 담고 있는 값이 바뀌면 앞에 있는 함수가 즉시 실행된다.
* [fruit, car]라는 인자가 들어가 있으면 fruit 또는 car가 담고 있는 값이 하나라도 바뀌면 앞에 있는 함수가 즉시 실행된다.
useEffect 예제 코드
import {useState, useEffect} from 'react';
function App() {
const [counter,setCounter] = useState(0);
const [keyword,setKeyword] = useState("");
const onClick = () =>setCounter((prev) => prev +1);
const onChange = (e) => setKeyword(e.target.value);
console.log("I run All the time")
useEffect(()=>console.log("I run only Once"),[])
useEffect(()=>console.log("I run when 'keyword' changes"),[keyword])
useEffect(()=>console.log("I run when 'counter' changes"),[counter]);
return (
<div>
<input value={keyword} onChange={onChange} type="text" placeholder="Search here..." />
<h1 className={styles.title}>{counter}</h1>
<button onClick={onClick}>Click</button>
</div>
);
}
export default App;CleanUp function
앞에서 살펴봤듯이 useEffect는 특정 조건에서만 함수를 실행시키게 만들어 준다고 하였다. 그런데 해당 컴포넌트가 종료될 때만 어떤 일을 실행시키고 싶다면 어떻게 할까.
예를 들면, 컴포넌트 종료시점에 특정 분석 내용을 보내준다거나, 컴포넌트가 종료됨과 동시에 사용하던 event listener 같은 것을 삭제 시키고 싶은 경우이다. 이런 일을 하는 함수를 보통 cleanup 함수라고 부른다.
이런 cleanUp 함수를 만드는 방법은 아주 간단하다. useEffect(함수, [디펜던시]) 에서 첫번째 인자인 함수 안에서 return 문을 만들고 그 안에 종료시점에 해야될 일을 함수로 만들어서 리턴 하면 된다.
말로 하니까 복잡한데 코드를 살펴보자.
function Hello(){
useEffect(()=>{
console.log("지금 시작 했어") // ①
return ()=> console.log("지금 끝났어") // ③
},[])
return(
<h1>Hello</h1> // ②
)
}위와 같은 Hello라는 컴포넌트가 있다.
useEffect(함수,[])가 사용되었다.
[]빈 배열이니까 `console.log(“지금 시작 했어”) // ①` 이 코드는 컴포넌트 시작시 딱 한번만 실행된다.
그리고 Hello의 return 안의 내용이 실행된다. `// ②`의 내용이다.
마지막으로 useEffect의 함수 내부에 있는 return 문이 실행된다. `return ()=> console.log(“지금 끝났어”) // ③`
굳이 종료 시점이 시킬 일이 없으면 useEffect 안에 있는 함수에 return문을 넣을 필요는 없다.
이상으로 오늘은 간단하게 useEffect에 관련된 내용을 살펴봤다.