* useEffect에 넣을 수 있는 실행조건 ( [ ] )
- [ ] : useEffect에 실행조건을 넣을 수 있는곳
- 원래 실행조건을 넣지 않으면 mount, update시 실행된다.
- 실행조건을 추가하게되면 실행조건의 state가 변할 때만 실행이 된다.
useEffect(()=>{ console.log("change") }, [count])
- useEffect()의 두번째 파라미터로 [ ] 를 넣을 수 있음
- 거기에 변수나 state같은 것들을 넣을 수 있음
- 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다.
- 위의 예시는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다.
- (참고) [ ] 안에 state 여러개 넣을 수 있음
- (참고) [변수]를 넣어준다고해도 맨처음 component가 load될 때(mount시) 도 한번 실행된다.
useEffect(()=>{ console.log("change" }, [])
- 아무런 변수값도 안넣어주고 [ ]만 넣어주면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않는다.
- 두번째 인자를 빈값으로 주면 모든 변화를 감지한다.
* clean up function
- useEffect 안에 있는 코드를 실행하기 전에 return ()=>{ } 안에 있는 코드를 실행해준다.
- clean up function이라고 부른다.
useEffect(()=>{
그 다음 실행됨
return ()=>{
먼저실행됨
}
}, [count])
만약 useEffect안에 setTimeout() 을 사용할 경우 mount될때마다 setTimeout()이 실행된다.
코드를 잘못 구성하게 되면 타이머가 100개, 1000개가 될 수 있다.
버그를 방지하고 싶으면 useEffect에서 타이머 만들기 전에 기존 타이머를 제거하는 코드를 짜면 되는데
그럴 경우 return ()=>{} 안에 짜면 된다.
(다른예시)
서버로 데이터를 요청해서 응답을 받는데 2초가 걸린다. 그런데 유저가 1초를 기다리고 계속 새로고침을 하면 요청이 계속 쌓이게 될것이다. 이렇게되면 버그 발생 가능성이 있다. 따라서 return안에 기존의 요청을 전부 제거해주는 코드를 짜면 버그가 발생하지 않을것이다.
=> 기존의 요청과 충돌 방지가능
(참고) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성한다.
(참고) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행된다.
(참고) clean up function은 mount시에는 실행이 안되고 unmount시 실행이 된다.
=> unmount는 component삭제(즉, 다른페이지로 이동시)
* 예시 코드
useEffect(()=>{
const call = setTimeout(()=>{ setAlert(false) }, 2000)
return ()=>{
clearTimeout(call)
}
}, [])
* useEffect 활용 코드
function Detail(){
let [alert, setAlert] = useState(true)
useEffect(()=>{
setTimeout(()=>{ setAlert(false) }, 2000)
}, [])
return (
{
alert === true
? <div className="alert alert-warning">
2초후 사라짐
</div>
: null
}
)
}
function Detail(){
let [num, setNum] = useState('')
useEffect(()=>{
if (isNaN(num) === true){
alert('error')
}
}, [num])
return (
<input onChange((e)=>{ setNum(e.target.value) }) />
)
}
'Study > React' 카테고리의 다른 글
[React_study] Ajax (post, fetch) (0) | 2022.06.10 |
---|---|
[React_study] Ajax (서버와 통신) (0) | 2022.06.09 |
[React_study] Lifecycle & useEffect (0) | 2022.06.09 |
[React_study] styled-components (CSS in JS) (0) | 2022.06.09 |
[React_study] React Router (setting & routing & Link) (0) | 2022.06.08 |