[React] useMemo 를 사용하여 연산한 값 재사용하기/ 검색기능에 적용(ing)

useMemo라는 hook을 사용해서 연산된 값을 저장해놓을 수 있다.

성능최적화에 쓰인다.

 

 

참고 블로그 : 벨로퍼트

 

 

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

활성 사용자 수를 알게 하기 위해서 함수를 만들었다.

이 함수는 이름을 눌러서 초록색이 된 사용자만 세면 된다.

 

그런데 문제는 input값이 바뀔때에도 저 함수가 호출되는 것이다.

input 값이 바뀔때에는 저 함수가 실행될 필요가 없다.

 

 

 

---

 const count = countActiveUsers(users);

  const count = useMemo(() => countActiveUsers(users), [users]);

그래서 원래 위의 코드로 호출했던 것을

아래의 코드로 바꿔준다.

userMemo로 감싸주고 두번째 파라미터로 deps배열을 넣는다.

deps에 넣은 내용이 바뀌면, 첫번째 파라미터에 있는 함수를 호출하고

deps에 넣은 내용이 안바꼈다면 이전에 연산한 값을 재사용한다.

 

 

그러면 이제는 input에 값을 입력할때는 해당 함수가 호출되지 않는다.

 

 

 

---

적용하기

2021.07.20 - [WEB/REACT] - [REACT] 마켓컬리 클론코딩 - 검색 기능 구현하기

[REACT] 마켓컬리 클론코딩 - 검색 기능 구현하기

여기서 구현한 검색기능에서

검색창에 입력을 할때마다 값이 찾아진다.

지금은 db에 들어있는 값이 6개밖에 없어서 성능의 문제는 없을지 몰라도

많아지면 문제가 있을 것이라고 생각했다.

그래서 여기서 useMemo를 써보아야겠다.

 

 

여기서 문제는 헤더에서 검색어를 치고 엔터를 치면

상품 검색 페이지로 가는데

상품 검색 페이지에서 처음에 나타나는 검색어가 header에서 받아온 값이다.

그리고 input상태값이 onChange가 일어날때마다 useState로 그 값을 변화시키고 있었다.

 

 const [searchWord, setSearch] = useState( props.match.params.word);

 let search_list=[];
    product_list.forEach((p)=>{
        if(p.productName.indexOf(searchWord)===-1){
            return;
        }
        //배열에 추가
        search_list.push(p)
    })

 

 

바꾼코드

    function searchItems(product_list, searchWord){
        let search_list=[];
        product_list.forEach((p)=>{
        if(p.productName.indexOf(searchWord)===-1){
            return;
        }
        //배열에 추가
        search_list.push(p)
    })

    return search_list;
    }
 
  const search_list = useMemo(() => searchItems(product_list, searchWord),[searchWord]);

일단 searchWord가 바뀔때만 이 함수가 실행되도록 useMemo를 사용했다.

    const [searchWord, setSearchWord] = useState( props.match.params.word);
    const [search, setSearch] = useState(searchWord);

그리고 검색어는 두개로 만들어놓아

onChange가 일어날때는 search가 바뀌도록 했고

엔터를 치면 searchWord가 바뀌도록 하여, 엔터를 쳤을때만 검색이 되도록 했다.

 

 

 

 

남은 문제

저 함수가 input이 바뀔때마다 호출되지 않는 것은 성공했다.

하지만 useState를 사용하다 보니 역시나 search가 바뀔때마다 리렌더링 되고 있었다.

이부분에 대해서는 더 공부를 해봐야겠다.

 

 

 

실행화면