TIL(22.05.11)

RecoilRoot

recoil의 상태를 전역으로 사용하기위해서 전역에 RecoilRoot를 선언해줘야 한다. 루트 컴포넌트가 제일 좋은 장소이긴 하지만, 사용하는 scope에 따라서 적절하게 배분해주는 것이 더 효율적으로 보인다.

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      ~
    </RecoilRoot>
  );
}

Atom

atom은 쉽게 얘기하면 state다.(실제로는 상태의 일부를 나타낸다.) atoms는 ReccoulRoot의 하위에서는 어떤 컴포넌트에서든 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하고 있다. 따라서, atom에 변화가 있으면 해당 atom을 구독하는 모든 컴포넌트들이 re-render된다.

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 아래와 같이 사용하면 된다.

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

recoil에서는 useResetRecoil(state)을 통해서 상태를 기본값으로 쉽게 초기화할 수 있다. 멘토님께서는 이를 더 편하게 관리하기 위해서 customHook을 만들어서 사용중이시던데, 아직 익숙하지 않아서 좀더 이건 코드를 볼 필요가 있을것 같다.

Debounce vs Throttling

보통 검색을 위해 사용하는 input에서는 onChange 이벤트를 통해서 api를 호출하게 되는데, 타이핑할때마다 api를 호출하게되면 같은 작업을 빈번하게 실행하게 되어 성능 저하 이슈가 발생할 수 있다.
따라서, 작업을 일정간격으로 조절해서 api를 한번만 호출하게끔 제어를 한다. 가장 대표적인 방법이 디바운싱과 쓰로틀링이다.

초록색 선이 작업이 발생되는 빈도라면, 디바운싱과 쓰로틀링(빨간색 선)을 거치면서 설정한 시간에 따라서 작업을 수행하게된다.

• debounce: 세팅한 시간 간격동안 발생하는 이벤트 중에서 처음 또는 마지막 이벤트만 실행시키는 방식이다.

let timer;
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
  ~
});

• throttle: 이벤트가 동작하면 동작 실행 후 일정 간격동안에 들어오는 이벤트는 무시하는 방식이다.

let timer;
if (!timer) {
  timer = setTimeout(() => {
    timer = null;
      ~
  }, ms)
}

회고

무한스크롤을 하는 방법이 대체적으로 3가지가 있고, 요새는 주로 2가지 방식이 쓰이는거 같다. 내가 좀더 이해하기 쉬운 방식으로 짜보려고하는데 잘 안되어서 눈물이난다. 이게 슬퍼서 흐르는 눈물인지, 모니터 많이봐서 흐르는 눈물인지 분간할 수가 없네 떼잉..