[ 1. Hook의 예시 ]
Hook이란 ? 컴포넌트 LifeCycle 중간 중간에 뭔가 명령을 줄 수 있는 거를 말함
2. [ 코드 작성법 ]
1.
옛날식
/* 옛날 리액트식 코드 */
class Detail2 extends React.Component{
componentDidMount() {
//Detail2 컴포넌트가 Mount되었을 때 실행해주세요~
/* Ajax도 여기서 활용 */
}
componentWillUnmount() {
//Detail2 컴포넌트가 Unmount 되기 직전에 실행할 코드~(없어질 때)
}
}
JavaScript
복사
2.
최근(useEffect활용)
/*
useEffect 훅 실행 시점이 다양하다
- 컴포넌트가 mount 되었을 때
- 컴포넌트가 update 될 때
- 즉 컴포넌트가 rendering되었을 떄 실행하기 시작한다
- 이걸 이용하여 특정코드를 조작할 수 있다.
- 여러개를 사용하고싶다면 useEffect안에 다 써두되고 useEffect를 여러번 해두된다.
*/
useEffect(() => {
let timer = setTimeout(function() {
setAlert(false);
},2000)
/* 컴포넌트가 사라질 때 코드를 실행시키고싶으면 return 후 함수실행 수 도 있음 */
return ()=>{}
});
let [alert, setAlert] = useState(true);
JavaScript
복사
