useEffect / useCallback파기

🥕 useEffect

컴포넌트가 렌더링 될 때 실행할 수 있도록 하는 리액트 Hook임

 

클래스 컴포넌트의 

componentDidMount, 

componentDidUpdate, 

componentWillUnmount 라이프사이클 메서드와 같은 역할

 

=> 렌더링될때마다 매번 실행됨 (= 컴포넌트가 Mount 될 때에만 실행 )

useEffect(()=>{

      //실행코드

});

🥕 useEffect ( ( ) => {  , [ array ] }

=>  마운트 + array 변경 시 실행됨

첫번째 인자는 함수, 두번째 인자는 배열이 들어감

mount될때 실행되고 array가 변경될 때마다 실행됨

// 렌더링될 때마다 매번 실행됨
useEffect(()=>{

      //실행코드

}, [array] );

 

🥕 useCallback(callback, [state]);

state값이 변경되었을 때에만 함수를 생성하는 Hook임

props로 전달해야할 함수를 만들 때 반드시 사용 => 컴포넌트의 성능 향상