인프런 커뮤니티 질문&답변

type Props = {
  value: { key: string };
};

export const useEffectAndStateTest = ({ value }: Props) => {
  const [customValue, setCustomValue] = useState<{ key: string; name: string }>({ ...value, name: value.key });

  useEffect(() => {
    setCustomValue({ ...value, name: value.key });
  }, [value]);

  return { customValue };
};

export const useMemoTest = ({ value }: Props) => {
  const customValue = useMemo(() => ({ ...value, name: value.key }), [value]);

  return { customValue };
};

위 뒤 코드는 value라는 값을 내가 원하는 또 다른 형태의 값인 customValue라는 값을 바꾸어주는 코드입니다.

customValue 값을 바꾸는 방법이 구현하는데 useEffect와 useState를 이용하는 방법,
useMemo를 통해서 구현하는 방법이 있는데 각 방법의 장단점을 알고 싶습니다.