useEffect(()⇒{
// 작업…
}); ⇒ 컴포넌트가 렌더링 될 때 마다 실행
useEffect(()⇒{
//작업…
}, []);
⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행
useEffect(()⇒{
//작업…
}, [value]);
⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행, value 값이 바뀔 때 실행
useEffect(() ⇒ {
// 구독…
return () ⇒ {
//구독 해지…
}
},[]);
return값에 함수를 넣어, 함수 안에서 정리하는 작업을 처리해주면 된다. 해당 컴포넌트가 언마운트될 때, 다음 렌더링 시 useEffect가 실행되기 이전에 그 함수가 실행이 된다.
function App() {
const [count, setCount] = useState(1);
const [name, setName] = useState("");
const handleCountUpdate = () => {
setCount(count + 1);
};
const handleInputChange = (e) => {
setName(e.target.value);
};
// 랜더링 될 때마다 매번 실행됨
useEffect(() => {
//...
console.log("count 변화 🫶");
}, [count]);
//-> 이 배열은 dependency array라고 불린다.
//-> useEffect가 count가 바뀔때만 실행하고 싶다는 뜻
function App() {
return (
<>
<h1>오별</h1>
</>
);
}
export default App;
class HighSchool {
constructor(kor, eng) {
this.kor = kor;
this.eng = eng;
}
sum() {
return this.kor + this.eng;
}
avg() {
return this.sum() / 2;
}
}
const s1 = new HighSchool(100, 90);
console.log(s1.sum());
useCallback (0) | 2024.03.12 |
---|---|
useMemo() (0) | 2024.03.12 |
useReducer() (0) | 2024.03.11 |
Vite (0) | 2024.03.05 |
React (0) | 2024.03.04 |