💡 useEffect를 사용하여 마운트(처음 나타났을 때)/언마운트(사라질 때)/업데이트시(특정 props가 바뀔 때) 할 작업 설정하기
참고링크 : https://goddaehee.tistory.com/308
https://ko.reactjs.org/docs/hooks-effect.html
💡 정리
useEffect(() => {}); // 재렌더링마다 코드 실행
useEffect(() => {}, []); // mount시 1회 코드 실행
useEffect(() => {code}, [의존성1, 의존성2, ..]); // 조건부 effect 발생 의존성 배열 바뀔 때
useEffect(() => { return () => {}}); // unmount시 1회 실행
useEffect Hook을 이용해 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행하는 지 알려줌.
React는 우리가 넘긴 함수(effct)를 기억했다가 DOM업데이트를 수행한 이후에 불러낼 것.
이 외에도 데이터를 가져오거나 다른 명령형 API를 불러내는 일을 할 수 있다.
effect를 통해 state변수에 접근할 수 있기 때문.
함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있다.
맞다. 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다.
마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각
import react, {useEffect} from "react";
useEffect(effect, [, deps]);
📌 ex1) 렌더링이 완료될 때마다 실행되는 예시
useEffect(() => {
// 수행할 함수
});
import React, { useState, useEffect } from "react";
const Practice = () => {
const [count, setCount] = useState(0);
const countUp = () => setCount(count + 1);
useEffect(() => {
console.log("useEffect!!", count);
});
return (
<div>
<p>{count}번 클릭!</p>
<button onClick={countUp}>Click Me</button>
</div>
);
};
export default Practice;
→ 렌더링이 되었을 때, count가 변경될 때마다 console.log찍힘
📌 ex2) 최초 렌더링시에만 실행되는 예시
useEffect(() => {
// 수행할 함수
}, 빈배열);
import React, { useState, useEffect } from "react";
const Practice = () => {
const [count, setCount] = useState(0);
const countUp = () => setCount(count + 1);
useEffect(() => {
console.log("useEffect!!", count);
}, []);
return (
<div>
<p>{count}번 클릭!</p>
<button onClick={countUp}>Click Me</button>
</div>
);
};
export default Practice;
📌 ex3) 화면에 첫 렌더링 될 때 & 특정 값이 변경될 때에만 실행하는 경우
useEffect(() => {
// 수행할 함수
}, 특정배열);
import React, { useState, useEffect } from 'react';
const Practice = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('hayeong');
const countUp = () => setCount(count + 1);
const handleChangeName = (e) => setName(e.target.value);
useEffect(() => {
console.log('useEffect!!', count);
}, [count]);
return (
<div>
<p>안녕하세요, {name}입니다.</p>
<input onChange={handleChangeName} />
<p>{count}번 클릭!</p>
<button onClick={countUp}>클릭</button>
</div>
);
};
export default Practice;
useEffect(() => {
// 함수 처리부
return () => {
// cleanup => 정리 작업 실행
}
}, 배열);
import React, { useState, useEffect } from 'react';
const Exercise = () => {
const [count, setCount] = useState(0);
const [name, setName] = useState('hayeong');
const countUp = () => setCount(count + 1);
const handleChangeName = (e) => setName(e.target.value);
useEffect(() => {
console.log('useEffect!!', count);
return () => {
console.log('cleanup!!', count);
};
}, [count]);
return (
<div>
<p>안녕하세요, {name}입니다.</p>
<input onChange={handleChangeName} />
<p>{count}번 클릭!</p>
<button onClick={countUp}>클릭</button>
</div>
);
};
export default Exercise;