리액트 성능 최적화 함수 useEffect / useMemo / useCallback
useEffect
component가 마운트 / 언마운트 / 업데이트될 때,
할 작업을 선택하도록 하는 Hook함수
(외부 API를 요청하거나, 반복작업 / 작업예약 등에 쓰인다.)
useEffect(콜백함수, [name]) - 리액트 최적화
기존의 class형에서는 세 가지의 각 상태들을 따로 관리해야 하는 불편함이 있었지만, useEffect를 사용하면 한 번에 관리할 수 있다.
세 가지의 상태 : mount / unmount / update
mount
나타남
component가 처음 화면에서 보여질 때 (새로고침 시)
componentDidMount 메소드
unmount
component가 화면에서 사라질 때
componentWillUnmount 메소드
update
특정 props가 바뀌어 component가 업데이트될 때
componentWillUpdate 메소드
useEffect 사용하기
기본구문
useEffect(함수, [의존값 deps]);useEffect(() => {
mount 시 실행할 함수;
return () => {unmount 시 실행할 내용}
}, [deps값]);1) 먼저 mount 시 실행할 함수를 작성한다.
2) 반환 값에는 unmount 시 실행할 내용을 작성한다. (cleanup)
3) deps값에 특정 값을 넣으면, 해당 값이 업데이트될 때마다 useEffect에 작성한 함수가 재실행된다.
*빈배열로라도 두어야 useEffect에 작성한 함수가 처음 mount될 때만 실행된다.(빈배열을 넣지 않으면, 리렌더링 될 때마다 계속 함수를 불러오기 때문에.)
useEffect 구문
useEffect(콜백함수)
- useEffect 를 사용하여 마운트 / 언마운트 / 업데이트 시 실행할 작업 설정하기
- 이 함수를 사용하면 처음 화면이 나타날 때 특정 작업을 할 수 있다.
- 리렌더링 될 때마다 특정 작업도 할 수 있다.
렌더링 될 때마다 실행
ex)
useEffect(()=>{
//실행할 코드
})화면에 첫 렌더링 될 때 실행 + value값이 변경될 때만 실행
ex)
useEffect(()=>{
//실행할 코드
}, [value])화면에 첫 렌더링 될 때만 실행
ex)
useEffect(()=>{
//실행할 코드
}, [])마운트 됐을 때 실행, 언마운트 됐을 때 실행
useEffect(()=>{
//마운트 됐을 때 실행코드
return ()=>{
//언마운트 됐을 때 실행코드
}
},[])cleanup 함수
해당 effect가 더 이상 실행할 필요가 없을 때 청소하는 용도.
여기서 더 이상 실행할 필요가 없는 경우는 다음 두 가지이다.
1)
dependancy(두 번째 인자로 넘기는 배열)가 바뀌어서effect가 달라져야할 때 (이전 effect 청소)2) 해당 컴포넌트가
unmount될 때
deps
deps가 [ ]일 때
1) 컴포넌트가 처음 나타날 때에만, useEffect에 등록한 함수가 호출된다.
2) return 값은 컴포넌트가 사라질 때 호출된다.
deps에 특정 값이 있을 때
1) 컴포넌트가 처음 마운트 될 때 ([ ] 일 때도 가능하다.)
2) 컴포넌트가 언마운트 될 때 ([ ] 일 때도 가능하다.)
3) 지정한 값이 바뀌기 직전에
4) 지정한 값(deps에 넣은 값)이 바뀔 때
→ useEffect 안에서 사용하는 상태 나 props 가 있다면, deps 에 넣어주어야 하는 것이 규칙이다.
useEffect에 등록한 함수가 실행될 때, 최신 props 나 상태를 가리키기 위해
useMemo / useCallback
useMemo는 함수를 반환하지않고, 함수의 값만memoization해서 반환하고,
useCallback은 함수 자체를memoization해서 반환한다.
useMemo
- 처음 값을 계산할 때 그 결과값을 메모리에 저장해서 필요할 때만, 계산을 하지않고 메모리에서 꺼내서 재사용 하는 기법
- 자주 필요한 값을 처음 계산할 때 캐시에 저장을 해둬, 값이 필요할 때마다 캐시를 이용하여 재사용
useMemo(콜백함수,[]) : 값을 memoization
useMemo(()=>{
return 값;
},[deps])
// deps는 의존성 배열
const getNumber=(number)=>{
console.log("숫자가 변동되었습니다.");
return number;
}
const Show=((number,text))=>{
const showNumber= getNumber(number);
// 부모에게서 받은 타 props가 변경되어도 작동한다.
const showNumber= useMemo(() => getNumber(number), [number]);
// useMemo를 쓰면, number가 변경될 때에만 작동한다.
return(
<div>
{showNumber}
</div>
)
}useCallback
- 함수를 메모리에 저장해서 필요할 때만 메모리에서 꺼내서 재사용 하는 기법
useCallback(콜백함수,[]) : 함수를 mimoization
const getNumber= useCallback(()=>{
return number
},[number])
// number가 변경될 때에만 작동한다.사용 예시
useMemo ---> 결과값을 재사용
구문 >
useMemo(()=>{
return value; //결과값을 담아두고 재사용
},[deps])
useMemo(()=>{
return (num); //결과값을 담아두고 재사용
},[deps])
useCallback ---> 특정 함수를 재사용
useCallback((num=>{
return num + 1; //함수 자체를 재사용
}),[deps])
useMemo(()=>fn, [deps])
useCallback(fn,[deps])