[REACT] useState 대신 useMemo 를 사용해보자

시작 👊

조회수 체크를 할 거다.
조회수가 높은 top 10을 화면에 출력할 건데
조회수가 바뀌었을 때 리스트도 바뀌어야겠지?

그래서 상태를 체크하는 useState 를 사용해봤다.

useState

조회가 되면,
조회되는 항목을 props 로 받아서, useState 가 변화를 감지하고 리스트를 새로 렌더링할 생각이었다.

// TopViews.tsx
TopViews(props:any){

  ...

const [topViewList, setTopViewList] = React.useState<Array<any>>();

useState(()=>(
    getTopView();
),[props])

이렇게 하면 계속해서 useState 가 돌아가더라.

그래서 언젠가 본 적 있는 useMemo 를 사용해봤다.

useMemo

// TopViews.tsx
TopViews(props:any){

  ...

const [topViewList, setTopViewList] = React.useState<Array<any>>();

useMemo(()=> getTopView(), [props]);

이렇게 하니까 props 가 바뀔 때만 반응하고,
StackOverFlow 의 고수가 잘 설명해놓은 걸 보니
앞으로 useMemo 를 더 많이 사용하게 될 것 같다.

예전에 댓글을 useState 로 계속 받은 적이 있는데, useMemo 를 사용했어야했나보다.

참고 : StackOverFlow

In terms of how often expensiveCalculation runs, the two have identical behavior, but the useEffect version is causing twice as much rendering which is bad for performance for other reasons.

Plus, the useMemo version is just cleaner and more readable, IMO. It doesn't introduce unnecessary mutable state and has fewer moving parts.

상황에 따라 다르겠지만, 언제 써야할 지 대강 감이 온다.
쉽다 쉬워.

끝