반응형

함수 방식 라이프사이클 구현

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

+ Recent posts