[항해 99 주특기 주차 8일차]

<회고록>

오늘은 팀원들과 함께 검색창 기능을 구현하는 시간을 가졌다. 그래서 오늘은 내가 검색창 기능을 구현하면서 어려웠거나 헷깔렸던 부분들에 대해서 설명하려고 한다.

1. state 정말 어렵다...

: 오늘 검색창 기능을 구현하면서 정말 헷깔렸던 부분은 state와 리엑트 리렌더링이었다. state와 리엑트 리렌더링에 대해서 블로그에 글을 남겨도 백문이 불여일견이라고 직접 해보는 것이 정말 중요하다는 것을 깨달았다. 어떤 부분이 어려웠는지 구체적으로 살펴보겠다.

const MainPage = () => {
  // 해더에서 selectBox 데이터 바뀔때마다 전체 화면 다시 리렌더링
  const [article, setArticle] = useState("web");
  const onChangeHandler = (e) => setArticle(e.target.value);
  return (
    <MainPageBlock>
      <SearchHeader onChange={onChangeHandler} />
      <SearchFormContainer article={article} />
      <SearchFooter />
    </MainPageBlock>
  );
};

내가 처음에는 이렇게 코드를 작성하지 않고 이런 식으로 작성했다.

const MainPage = () => {
  // 해더에서 selectBox 데이터 바뀔때마다 전체 화면 다시 리렌더링
  const article = localStroage.setItem("web")
  ~~~~
  return (
    <MainPageBlock>
      <SearchHeader onChange={onChangeHandler} />
      <SearchFormContainer article={article} />
      <SearchFooter />
    </MainPageBlock>
  );
};

여기서 localStorage를 처음 렌더링 할때만 불러오기 때문에 더이상의 리렌더링은 일어나지 않는다. 따라서 localStorage에서의 값이 바뀐다고 해도 이는 적용되지 않는 것이다. 따라서 앞으로 값이 변할때마다 바로바로 리렌더링이 일어나고 싶을 때는 state 즉 지역 상태를 사용해야 한다.

 

2. debouncing 도대체 머지?....

: debouncing의 탄생배경은 실시간 검색에서의 api 요청과 관련해서 나왔다. 자세히 알려면 실시간 검색의 기본적인 동작 원리를 살펴봐야 한다.

    1. input이 onChange 될때마다 state를 업데이트 해준다.

    2. 해당 state가 업데이트 될 때마다 api 요청을 해야한다.

    3. api 요청으로 나온 값을 state에 저장해야 한다.

지금 이 구조를 보면 한가지 한계점을 볼 수 있다. 바로 onChange될 때마다 api 요청을 한다는 것이다. 즉 예를 들어 "김민승"을 입력하면 총 9번을 api와 요청을 거치는 것이다. 그리고 이 한계점을 해결할 수 있는 방법이 debouncing이다. debouncing이란 input이 onChange 될때마다 state를 업데이트 하는 것이 아닌 onChange 후 몇초 후에 state에 변화가 없을 때 state를 업데이트 하는 것이다. 즉 여러번 업데이트를 거치는 단점을 정말 적은 수로 업데이트를 거치기 때문에 성능적인 면에서 엄청난 변화가 일어난다. 위에 예시에서 "김민승"을 입력하고 delay가 2초라고 하면 "김민승"을 연속으로 입력하고 2초 후에 state를 업데이트 하니 1번만 업데이트를 하는 것이다. 이는 api의 호출 횟수도 줄어들기 때문에 서버와의 상황에서도 좋은 영향을 끼친다. 따라서 실시간 검색을 할때는 debouncing 기술을 사용하는 것이 좋다.