[react] 라이프 사이클, useEffect 정리

[react] 라이프 사이클, useEffect 정리

 

라이프사이클

componentDidMount() {}
컴포넌트가 처음 렌더링 된 직 후 동작
setState를 렌더 안에서 사용할 수 없음 (무한 렌더링 발생하기 때문에)

componentDidUpdate() {} 
setState 또는 props로 리렌더링 되었을때 동작

componentWillUnmount() {}
컴포넌트가 제거되기 직전
비동기 요청 수동으로 clear 처리 해야 함 안하면 메모리 누수 문제 발생
showcomponentupdate() {}

 

useEffect

useEffect(() => {
    componentDidmount 역할 코드
    return () => { componentWillUnmount 역할 코드 }
}, [바뀌는 state 값, componentDidUpdate 기능])

• 라이프 사이클은 클래스에만 있음
• hooks의 useEffect가 라이프 사이클 기능을 대체
• hooks에는 없지만, useEffect를 이용하여 라이프사이클의 비슷한 역할을 할 수 있음
• 두번째 인수 배열에 넣은 값(바뀌는 state, useEffect를 다시 실행할 값)이 바뀔때 useEffect가 실행됨
• []이 빈 배열이면 componentDidmount와 같음
• 배열에 요소가 있으면 componentDidMount와 componentDidUpdate 둘다 수행
• []안의 값에 따른 다른 effect를 사용할 경우, useEffect를 여러번 사용 가능
• 반면 class의 경우, componentDidmount나 componentDidUpdate에 모든 state를 조건문으로 분기 처리 함

 

useMemo , useCallback

• 재실행 함수를 못하도록 이미 사용한 함수 기억함
• const getLottoNums = useMemo(() => getLottoNums(), []);
• useMemo, useEffect, useCallback은 두번째 인자가 배열로 있음
• hooks가 복잡한 함수 결과 값(리턴 값)을 기억하고 있음([]안에 요소가 들어가기 전까지)
• hooks는 전체 코드가 재실행되기때문에 useMemo로 한번만 사용하게 만들어 최적화 시킴
• useRef: 일반 값
• useCallback 함수 자체를 기억
• 부모가 자식 컴포넌트에 props로 함수를 넘길때, useCallback으로 꼭 사용해야함(이유: 함수가 계속 안바뀌게 함)
• useCallback, useMemo 사용하는 이유: 불필요한 렌더링을 막아줌
• 차이점 : useMemo는 함수의 리턴 결과값을 기억, useCallback 함수 자체를 기억