11. useEffect
1. useEffect란?
useEffect는 컴포넌트가 화면에 렌더링된 후 특정 작업을 실행하는 Hook입니다.
대표적인 사용 예는 다음과 같습니다.
데이터(API) 불러오기
localStorage 읽기
타이머 실행
슬라이드 자동 변경
이벤트 등록 및 해제
React에서는 화면이 그려진 후 실행해야 하는 작업을 useEffect 안에서 처리합니다.
2. useEffect 가져오기
import { useEffect } from "react";
3. 기본 문법
useEffect(() => {
console.log("실행");
});
컴포넌트가 렌더링될 때마다 실행됩니다.
4. 최초 한 번만 실행
React에서 가장 많이 사용하는 형태입니다.
useEffect(() => {
console.log("처음 한 번 실행");
}, []);
빈 배열([])을 넣으면 컴포넌트가 처음 화면에 나타날 때 한 번만 실행됩니다.
5. 특정 값이 변경될 때 실행
const [count, setCount] = useState(0);
useEffect(() => {
console.log("count 변경");
}, [count]);
count가 바뀔 때마다 실행됩니다.
6. 여러 값 감시
useEffect(() => {
console.log("변경");
}, [name, phone]);
name 또는 phone이 변경되면 실행됩니다.
7. localStorage 읽기
동부산CC 좋아요 예제
useEffect(() => {
const saved = localStorage.getItem("like");
if(saved){
setLiked(saved === "true");
}
}, []);
페이지를 새로고침해도 저장된 값을 다시 불러옵니다.
8. 자동 슬라이드
Hero 영역
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setIndex((prev) => prev + 1);
},3000);
return () => clearInterval(timer);
}, []);
3초마다 Hero 문구가 변경됩니다.
9. cleanup 함수
useEffect(() => {
const timer = setInterval(() => {
},1000);
return () => {
clearInterval(timer);
};
}, []);
컴포넌트가 사라질 때 실행됩니다.
타이머나 이벤트를 반드시 정리해야 메모리 누수를 방지할 수 있습니다.
10. API 호출
useEffect(() => {
fetch("https://example.com/api")
.then(res=>res.json())
.then(data=>{
console.log(data);
});
}, []);
실무에서는 데이터를 처음 불러올 때 자주 사용합니다.
11. 동부산CC 예제
좋아요 불러오기
useEffect(() => {
const like = localStorage.getItem("courseLike");
if(like){
setLiked(true);
}
}, []);
Hero 자동 변경
useEffect(() => {
const timer = setInterval(() => {
setSlide((prev)=>prev+1);
},5000);
return ()=>clearInterval(timer);
}, []);
예약 목록 불러오기
useEffect(() => {
const list = JSON.parse(
localStorage.getItem("reserve")
);
if(list){
setReserve(list);
}
}, []);
12. useEffect 실행 순서
컴포넌트 생성
↓
화면 출력
↓
useEffect 실행
State가 변경되면
State 변경
↓
렌더링
↓
useEffect 실행
13. useEffect와 useState
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
버튼
<button
onClick={() =>
setCount(count+1)
}
>
증가
</button>
실행
버튼 클릭
↓
State 변경
↓
화면 변경
↓
useEffect 실행
14. 언제 사용할까?
✔ API 데이터 가져오기
✔ localStorage 읽기
✔ 자동 슬라이드
✔ 타이머
✔ 로그인 확인
✔ 스크롤 이벤트
✔ 웹소켓 연결
✔ 외부 라이브러리 초기화
15. useEffect 사용 시 주의사항
실행마다 반복
useEffect(()=>{
});
모든 렌더링 때 실행됩니다.
최초 한 번
useEffect(()=>{
},[]);
가장 많이 사용하는 형태입니다.
특정 값 변경
useEffect(()=>{
},[count]);
count가 바뀔 때만 실행됩니다.
16. 실행 흐름
컴포넌트 생성
↓
렌더링
↓
useEffect
↓
State 변경
↓
다시 렌더링
↓
useEffect
정리
useEffect는 컴포넌트가 렌더링된 이후 특정 작업을 실행하는 React Hook입니다.
주로 API 호출, localStorage 읽기, 타이머 실행, 자동 슬라이드, 이벤트 등록 등에 사용합니다.
의존성 배열([])을 어떻게 설정하느냐에 따라 실행 시점이 달라집니다.
[] → 처음 한 번만 실행
[count] → count가 변경될 때 실행
생략 → 렌더링될 때마다 실행
동부산CC 프로젝트에서는 Hero 자동 슬라이드, 좋아요 상태 복원, 예약 데이터 불러오기 등 다양한 기능을 useEffect로 구현할 수 있습니다.
1. useEffect란?
useEffect는 컴포넌트가 화면에 렌더링된 후 특정 작업을 실행하는 Hook입니다.
대표적인 사용 예는 다음과 같습니다.
데이터(API) 불러오기
localStorage 읽기
타이머 실행
슬라이드 자동 변경
이벤트 등록 및 해제
React에서는 화면이 그려진 후 실행해야 하는 작업을 useEffect 안에서 처리합니다.
2. useEffect 가져오기
import { useEffect } from "react";
3. 기본 문법
useEffect(() => {
console.log("실행");
});
컴포넌트가 렌더링될 때마다 실행됩니다.
4. 최초 한 번만 실행
React에서 가장 많이 사용하는 형태입니다.
useEffect(() => {
console.log("처음 한 번 실행");
}, []);
빈 배열([])을 넣으면 컴포넌트가 처음 화면에 나타날 때 한 번만 실행됩니다.
5. 특정 값이 변경될 때 실행
const [count, setCount] = useState(0);
useEffect(() => {
console.log("count 변경");
}, [count]);
count가 바뀔 때마다 실행됩니다.
6. 여러 값 감시
useEffect(() => {
console.log("변경");
}, [name, phone]);
name 또는 phone이 변경되면 실행됩니다.
7. localStorage 읽기
동부산CC 좋아요 예제
useEffect(() => {
const saved = localStorage.getItem("like");
if(saved){
setLiked(saved === "true");
}
}, []);
페이지를 새로고침해도 저장된 값을 다시 불러옵니다.
8. 자동 슬라이드
Hero 영역
const [index, setIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setIndex((prev) => prev + 1);
},3000);
return () => clearInterval(timer);
}, []);
3초마다 Hero 문구가 변경됩니다.
9. cleanup 함수
useEffect(() => {
const timer = setInterval(() => {
},1000);
return () => {
clearInterval(timer);
};
}, []);
컴포넌트가 사라질 때 실행됩니다.
타이머나 이벤트를 반드시 정리해야 메모리 누수를 방지할 수 있습니다.
10. API 호출
useEffect(() => {
fetch("https://example.com/api")
.then(res=>res.json())
.then(data=>{
console.log(data);
});
}, []);
실무에서는 데이터를 처음 불러올 때 자주 사용합니다.
11. 동부산CC 예제
좋아요 불러오기
useEffect(() => {
const like = localStorage.getItem("courseLike");
if(like){
setLiked(true);
}
}, []);
Hero 자동 변경
useEffect(() => {
const timer = setInterval(() => {
setSlide((prev)=>prev+1);
},5000);
return ()=>clearInterval(timer);
}, []);
예약 목록 불러오기
useEffect(() => {
const list = JSON.parse(
localStorage.getItem("reserve")
);
if(list){
setReserve(list);
}
}, []);
12. useEffect 실행 순서
컴포넌트 생성
↓
화면 출력
↓
useEffect 실행
State가 변경되면
State 변경
↓
렌더링
↓
useEffect 실행
13. useEffect와 useState
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
버튼
<button
onClick={() =>
setCount(count+1)
}
>
증가
</button>
실행
버튼 클릭
↓
State 변경
↓
화면 변경
↓
useEffect 실행
14. 언제 사용할까?
✔ API 데이터 가져오기
✔ localStorage 읽기
✔ 자동 슬라이드
✔ 타이머
✔ 로그인 확인
✔ 스크롤 이벤트
✔ 웹소켓 연결
✔ 외부 라이브러리 초기화
15. useEffect 사용 시 주의사항
실행마다 반복
useEffect(()=>{
});
모든 렌더링 때 실행됩니다.
최초 한 번
useEffect(()=>{
},[]);
가장 많이 사용하는 형태입니다.
특정 값 변경
useEffect(()=>{
},[count]);
count가 바뀔 때만 실행됩니다.
16. 실행 흐름
컴포넌트 생성
↓
렌더링
↓
useEffect
↓
State 변경
↓
다시 렌더링
↓
useEffect
정리
useEffect는 컴포넌트가 렌더링된 이후 특정 작업을 실행하는 React Hook입니다.
주로 API 호출, localStorage 읽기, 타이머 실행, 자동 슬라이드, 이벤트 등록 등에 사용합니다.
의존성 배열([])을 어떻게 설정하느냐에 따라 실행 시점이 달라집니다.
[] → 처음 한 번만 실행
[count] → count가 변경될 때 실행
생략 → 렌더링될 때마다 실행
동부산CC 프로젝트에서는 Hero 자동 슬라이드, 좋아요 상태 복원, 예약 데이터 불러오기 등 다양한 기능을 useEffect로 구현할 수 있습니다.
#11. useEffect