새롭게 알게 된 리액트 클린 코드

기존에 알지 못했던 사실과 알지만 관련된 팁들을 정리했습니다.

useEffect 기명함수

첫번째로 useEffect Hook을 사용할 때 기명함수를 사용하는 것입니다.
사용의 예를 코드로 확인해봅시다.

import { useEffect } from 'react';

const NameFunction = () => {
  useEffect(function AddEventListener() {
    document.addEventListener();

    return function RemoveEventListener() {
      document.removeEventListener();
    };
  }, []);

  return <></>;
};

export default NameFunction;

이렇게 사용하는 것이 좋을까요? 저는 간단한 useEffect Hook이라면 익명함수로 적을 거 같습니다.
하지만 useEffect Hook이 길어 어떤 Hook인지 한눈에 알아보기 어렵다면, 저는 팀원들의 DX가 좋게 하기 위해 주석으로 어떠한 훅인지 남깁니다.

하지만 이렇게 기명함수로 적어준다면 함수명을 보고 팀원들이 이 useEffect 훅이 어떠한 훅인지 체크가 가능합니다. 또한 기명 함수를 사용했을 경우 에러가 터졌을 때 콜스택으로 쌓여서 디버깅 시에 어디서 문제가 생겼는지 보다 쉽게 파악이 가능하다는 장점이 있습니다.

useEffect 단일 책임 원칙

const SolidEffect = () => {
  const [title, setTitle] = useState('hi');

  useEffect(() => {
    document.title = title;
    trackingSite();
  }, [title]);

  return <></>;
};

위 코드의 문제점이 보이시나요? 바로 title이 변경될 때마다 페이지의 방문도 추적하고 있습니다. 이것은 우리가 원하는 작동 방법이 아닙니다. 그럼 이걸 막기 위해 useEffect 내에서 조건부 처리를 하는 경우도 있지만 useEffect Hook 내에서 코드가 길어진다면 과도한 조건부 처리는 성능 및 유지 보수에 좋지 않습니다. 따라서 코드가 길어지더라도 useEffect를 분리해 주세요.

const SolidEffect = () => {
  const [title, setTitle] = useState('hi');

  useEffect(() => {
    document.title = title;
  }, [title]);

  useEffect(() => {
    trackingSite();
  }, []);

  return <></>;
};

useEffect Hook 내에서 단일 원칙으로 사용하자. useEffect 내부에서 if return 및 과도한 조건부 처리는 성능 및 유지보수에 좋지 않음.

Object Props

function ParentComponent(heavyState) {
  const [propsObj, setPropsObj] = useState({
    Required: '저는 Component1에서 필요한 값들이에용',
    Unnecessary: '저는 사용하지 않는 값들이에용',
  });

  // * Heavy 한 State이고 자주 호출이 됩니다!
  const computedState = useMemo(() => {
    heavyState;
  }, [heavyState]);

  return (
    <>
      <ChildCom computedState={computedState} state={propsObj.Required} />
    </>
  );
}

백엔드에서 Data Fetching 해서 데이터를 받았을 경우 정말 필요한 데이터만 분리해서 내려보내줍니다. 또힌 무겁고 자주 사용되는 props라면 useMemo로 캐싱 처리해서 내려줍니다. 추가로 객체 Props는 리렌더링의 단점이 존재하기 때문에 오히려 단순한 Props가 명시적이고 더 좋을 수 있기 때문에 적절하게 사용합니다.

const ParentCom = props => {
  const { isOpen, ...rest } = props;
  return <ChildCom {...rest} />;
};

...rest, ...props를 사용하면 당장은 편하지만 명시적이지 않기 때문에 추후에 코드를 예측하기 어렵고 추후 유지보수가 어렵기 때문에 알맞게 사용합니다. 만약 사용하게 된다면 관련 있는 Props와 관련 없는 Props로 나눠 사용하고 관련 있는 Props를 명시적으로 내려줍니다.

Reference

• https://tkdodo.eu/blog/simplifying-use-effect