[React] 최적화

시작하기 전 생명주기 꺼내기

https://iun-00.tistory.com/8

[React] 컴포넌트 생명주기

 

 

 

useMemo?

함수 호출 결과를 저장

const 저장할_변수 = useMemo(() => {
  return 함수코드
}, [값]);

 

불필요한 리렌더링 계산을 방지해주는 기능으로

상태 변경으로 리렌더링 되면서 같은 공간에 있는 변화없는 값을 무시해준다

 

const [number,setNumber] = useState(0)
const [text,setText] = useState('')

한 개 이상의 상태가 있을 때

number의 값이 5로 변경되면 함수 전체가 리렌더링된다

하지만 여기서 변경된 값은 number 뿐, 변화가 없는 text까지 리렌더링되면서

불필요한 계산이 생기게 된다

 

만약 위 예시와 다른 큰 계산의 함수일 경우 주로 한다

강제 리렌더링 되는 것을 막기 위해 useMemo로 방지해준다

 

useMemo의 두번째 인자로 무슨 값이 변화면 해당 함수를 실행시킬지 결정해줄 수 있다

 

 

 

useCallback?

함수를 저장

const 저장할_함수 = useCallback(() => {
  return 함수코드;
}, [값]);

useMemo와 같은 방식이다

대신 변수가 아닌 함수 자체를 저장한다는 차이다

 

선언한 함수 역시 리렌더링되면서 새롭게 다시 선언되기 때문에

리렌더링해도 해당 함수의 값이 변하지 않는다면

불필요하게 다시 함수를 선언할 이유도 없다

 

 

 

memo?

컴포넌트를 저장

const 저장할_컴포넌트 = memo((props) => {
  함수 컴포넌트 코드
});

useMemo와 useCallBack과 작동방식은 비슷하지만, 값을 비교하는 방법에 차이가 있다

앞에서는 두번째 인자로 비교했다면 memo는 props를 받은 값으로 비교를 한다

 

여기서

memo로 감싼 컴포넌트 내부에 상태변화가 있으면 리렌더링이 방지되는걸까?

그건 아니다!

 

memo는 props를 받아올 때만 작동하기 때문에

해당 컴포넌트의 내부 상태와는 연관이 없다