반응형
함수 방식 라이프사이클 구현
16.8 이후 버전에서 hook 사용하여 구현가능
- useEffect
useEffect
- useEffect = side effect : 부가 작용(after function) // EX) $('').slideUp(delay,function(){})
- 함수형 컴포넌트 (function)의 내에 작성하지만 retrun 내의 코드가 실행(render)된 이후에 동작
- 하나의 함수형 컴포넌트 안에 여러 개의 useEffect 설치 가능
- 첫 번째 인자에는 함수 작성
- class 방식의 componentDidMount, componentDidUpdate와 동일
clean up(정리)
- componentWillMount, render, componentDidMount : 컴포넌트가 처음으로 DOM에 나타나는 순간에 수행해야 할 초기 작업 구현
- componentWillUnmount : 컴포넌트 퇴장 또는 소멸 시 수행해야 할 작업 구현
useEffect를 이용한 clean up
- useEffect의 첫 번째 인자인 function 함수 안에 return 함수 사용
- useEffect 실행 후 반환될 내용 작성
clean up을 이용한 useEffect
- 초기 실행 : render - useEffect
- 재실행 : render - return - useEffect
const funcStyle = "color:white; background:tomato";
let funcId = 0;
useEffect(() => {
console.log("%cfunc=> useEffect is complete" + ++funcId, funcStyle);
return function () {
console.log(
"%cfunc=> useEffect return is complete" + ++funcId,
funcStyle
);
};
});
skipping Effect(Effect를 건너뛰어 성능 최적화하기)
- 성능을 최적화하기 위해 Effect가 호출되는 것을 생략하는 기법
class 방식 Skipping Effect
- componentDidUpdate함수의 인자로 이전 props 값과 이전 state를 가져온 후 현재 state값과 이전 state값이 다른 경우에만 문장실행
componentDidUpdate(prevProps,PrevState){
if(prevState.count !== this.state.count){
document.title = `you clicked ${this.state.count} times`;
}
}
함수 방식 Skipping Effect
- useEffect 함수의 두번째 인자에 비교할 값을 배열 형태로 입력하여 사용
useEffect(()=>{
document.title = `you Clicked ${count} times`;
}, [count]);
//count가 바뀔 때만 effect를 재실행 합니다.
useEffect 실행 활용
- useEffect는 컴포넌트 라이프 사이클 중 componentDidMount와 componentDidUpdate에 해당하는 타이밍에 실행되므로 2번 실행됨
componentDidMount 일 때에만 실행하기
- 두번째 인자의 배열값을 빈 값으로 입력
- 컴포넌트가 생성될 때 처음 1회만 실행되고 이후에는 실행되지 않음
- useEffect 함수 내에 return 함수는 componentWillUnmount와 동일한 효과 발생
728x90
'React > ReactJS' 카테고리의 다른 글
Upgrade CRA to VITE(React)__001 (1) | 2024.07.15 |
---|---|
2023/07/27__ReactJS(5) (0) | 2023.07.27 |
2023/07/21__ReactJS (0) | 2023.07.21 |
2023/07/20__ReactJS(3) (0) | 2023.07.20 |
2023/07/19__ReactJS(2) (0) | 2023.07.19 |