[원티드] 5월13일 TIL

개인 과제

intersection observer를 거는 과정에서 오류가 나서 한참을 해매었다

useEffect(() => {
    if (movieList.length < 11 && movieList.length > 0) {
      const io = new IntersectionObserver(entries => {
        console.log(movieList);
        if (entries[0].isIntersecting) {
          setPage(prev => prev + 1);
        }
      });
      io.observe(fetchRef.current);
    }
  }, [movieList]);

observation = 감시는 1번만 이루어지면 되는데 api콜이 필요할 때마다 매번 호출해야하는 방식으로 착각해서 미친듯이 api콜을 해버리게 되었다.

if (movieList.length < 11 && movieList.length > 0)

조건문을 추가하여 감시는 지속적으로 한 번만 하게 해주었다.

ESLINT RULE

react/function-component-definition

기본 설명

...
"react/function-component-definition": [<enabled>, {
  "namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array<"function-declaration" | "function-expression" | "arrow-function">,
  "unnamedComponents": "function-expression" | "arrow-function" | Array<"function-expression" | "arrow-function">
}]
...

간단한 예제

// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
  return <div />;
}

// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
const Component = function (props) {
  return <div />;
};

// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
const Component = (props) => {
  return <div />;
};

// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
  return function (props) {
    return <div />;
  };
}

// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}