06.Lifecycle Hook, useEffect
Updated:
컴포넌트의 Lifecycle & Hook
컴포넌트는 Lifecycle이라는 개념이 있습니다.
컴포넌트도 인생이 있다는겁니다.
컴포넌트는 1. 생성이 될 수도 있고 2. 삭제가 될 수 있고 3. 관련된 state가 변경되면 재렌더링(업데이트)가 일어날 수도 있습니다.
- 컴포넌트의 인생 중간중간 Hook을 걸 수 있습니다. Hook 을 이용해서 중간중간 참견할 수 있습니다.
예를 들어,
“Detail 컴포넌트 등장 전에 이것좀 해줘”
“Detail 컴포넌트 사라지기 전에 이것좀 해줘”
“Detail 컴포넌트 업데이트 되고나서 이것좀 해줘”
Hook을 사용하면 이런 코드를 짤 수 있다는 것이지요.
Hook의 정확한 명칭은 Lifecycle Hook 이라고 합니다.
Lifecycle Hook은 어떻게 생겼는가?
class Detail2 extends React.Component {
componentDidMount(){
//Detail2 컴포넌트가 Mount 되고나서 실행할 코드
}
componentWillUnmount(){
//Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
}
}
class component 작성하는 곳 안에 넣으면 되는데 가장 유용한 Hook 두개는
-
componentDidMount() : component 첫 등장 후 실행 할 코드
-
componentWillUnmount(): 다른페이지로 넘어간다든지 등의 사유로 컴포넌트가 사라지기 전 실행할 코드
function 컴포넌트에서 사용하는 useEffect 훅
요즘 react 개발에선 useEffect 를 많이 사용합니다. (짧고 더 쉬움)
function component 안에 넣어 주면 됩니다. (return 나오기 전)
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
//코드를 적습니다 여기
});
return (
<HTML 코드/>
)
}
1.근데 미리 페이지 상단에서 useEffect를 import 해오신 후
2.useEffect() 를 사용하셔야합니다.
3.그리고 안에 콜백함수를 집어넣습니다.
4.콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 됩니다.
조금 더 자세하게 알아보는… useEffect() 내의 코드의 실행조건은
-
컴포넌트가 첫 등장해서 로딩이 끝난 후에 ( mount 끝났을 때)
-
컴포넌트가 재렌더링 되고난 후 때 ( update 되고난 후에)
입니다.
component 가 사라질 때 코드를 실행하기 (useEffect)
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
return function 함수명(){ 실행할 코드 }
});
return (
<HTML 코드/>
)
}
useEffect() 안에는 return이라는걸 넣을 수 있습니다.
그리고 여기 넣은 함수는 컴포넌트가 사라질 때 실행됩니다.
-
당연히 다른 곳에서 만들어 놓은 함수명을 입력하셔도 됩니다.
-
arrow function 집어넣으셔도 가능합니다.
useEffect 여러개 사용하기
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
//1번째 실행 코드
});
useEffect(()=>{
//2번째 실행 코드
});
return (
<HTML많은곳/>
)
}
- 쭉 적으면 위에부터 순서대로 useEffect() 가 실행 됩니다
응용 ! useEffect() 를 사용하여 alert 창 사라지게 하기
-
UI 만들기
-
UI 보이고 안보이고의 상태를 state 로 저장해둠 (true / false 이런걸로)
-
state 가 true 일때만 UI 를 보여주는 if 문 작성
-
// UI 만들기
function Detail() {
let [ alert, alertEdit ] = useState(true);
useEffect(() => {
let Timer = setTimeout(() => { alertEdit(false)}, 2000)
});
return (
{ // 삼항연산자 사용
alert === true
? (<div className="my-alert2">
<p>재고가 얼마 남지 않았습니다</p>
</div>)
: null
}
)
}
-
항상 보이는 UI 가 아니라면, (모달창, alert 창, 등) 일시적으로 보였다가 사라지거나 나타나는 창을 만들때 react 에서는 위와 같은 방법으로 만들어야 한다.
-
근데 Detail component 가 업데이트 될때도 설정한 useEffect 가 실행됩니다
-
useEffect()는 컴포넌트 등장 & 업데이트가 되고나서 항상 실행됩니다.
-
component 가 업데이트 될때 마다 useEffect() 가 실행되기 때문에 나중에 bug 가 자주 발생함..
그래서 업데이트될때는 useEffect() 를 실행하지 않게 설정을 해야 합니다.
useEffect(()=>{
let timer = setTimeout(()=>{ alertEdit(false) }, 2000);
}, [ alert ]);
-
위와 같이 끝부분에 alert 라는 이름의 state 가 변경될때만
useEffect()가 실행 되도록 설정할 수 있습니다. -
일종의 실행조건인데 1. Detail component 가 로드가 될때 && 2. alert 이라는 state 가 변경이 될때만 실행됩니다.
useEffect(()=>{
let timer = setTimeout(()=>{ alertEdit(false) }, 2000);
}, []); // 빈 [] 만있게 되면 단 1회성으로 만 실행함
- 위에는 조건을 안넣은 겁니다. 그럼 이제 이 useEffect() 코드는 컴포넌트가 업데이트 될 때 절대 실행되지 않습니다.
그냥 컴포넌트 로드때만 한번 딱 실행하고 싶은 코드를 담을 때 쓸 수 있는 것입니다.
setTimer 해제
- setTimer() 를 사용할때 component 가 사라질때 타이터를 없애는 코드도 추가해주는게 좋습니다. (나중에 타이머 때문에 다른곳에서 문제가 발생되는것을 방지!!)
useEffect(()=>{
let timer = setTimeout(()=>{ alertEdit(false) }, 2000);
return () => {clearTimeout(timer)}
}, []);
🔶 🔷 📌 🔑
Reference
-
react official page- https://reactjs.org/docs/hooks-effect.html
-
coding apple - https://online.codingapple.com/course/react-basic/
Leave a comment