2022.12.30 ~ 2023.05.01 세일링99 리액트 능숙한 주차
오늘의 주제 useEffect
사용 시기
useEffect는 React 구성 요소가 렌더링될 때 특정 작업을 수행하도록 구성할 수 있는 후크입니다.
간단히 말해서 구성 요소가 화면에 있을 때 무언가를 실행하려면 어떻게 해야 합니까? 또는 구성 요소가 화면에서 사라질 때 무언가를 하고 싶다면 어떻게 해야 할까요? useEffect 사용.
// src/App.js
import React, { useEffect } from "react";
const App = () => {
useEffect(() => {
// 이 부분이 실행된다.
console.log("hello useEffect");
});
return <div>Home</div>;
}
export default App;앱이 실행되면 hello 부분이 콘솔에 출력됩니다.
사용시 주의사항
import React, { useEffect, useState } from "react";
const App = () => {
const (value, setValue) = useState("");
useEffect(() => {
console.log("hello useEffect");
});
return (
<div>
<input
type="text"
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
</div>
);
}
export default App;이렇게 코드를 작성하면 입력을 쓸 때마다 콘솔이 녹화되고 옆에 카운터가 올라가는 현상을 볼 수 있습니다.
이유는 다음과 같습니다.
- 프롬프트에 값을 입력합니다.
- 값, 즉 상태가 변경됩니다.
- 상태가 변경되었기 때문에 앱 구성 요소가 다시 렌더링됩니다.
- 다시 렌더링되었으므로 useEffect가 다시 실행됩니다.
- 1단계 → 5단계가 계속됩니다.
이러한 이유로 무의미한 렌더링의 수를 줄이기 위해 여러 종속성을 도입하여 렌더링을 제한합니다.
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
// 실행하고 싶은 함수
}, (의존성배열))다음은 종속성 배열로 수정된 코드입니다.
// src/App.js
import React, { useEffect, useState } from "react";
const App = () => {
const (value, setValue) = useState("");
useEffect(() => {
console.log("hello useEffect");
}, ()); // 비어있는 의존성 배열
return (
<div>
<input
type="text"
value={value}
onChange={(event) => {
setValue(event.target.value);
}}
/>
</div>
);
}
export default App;원래 실행된 hello useEffect 외에 입력에 입력된 값이 무엇이든 더 이상 실행되지 않습니다.
UseEffect를 사용하지만 특정 기능을 한 번만 실행하고 싶다면 컴포넌트가 렌더링될 때 종속성 배열( )을 비워 둡니다.
(물론 onChange도 문제인건 알았지만…나중에)