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

안녕하세요 제로초님. 강의 잘 보고 있습니다..!

이번에 customHook을 사용하는 예제를 실행 했을 때,

export default (initialValue = null) => {
    const [value, setValue] = useState(initialValue);
    const handler = useCallback(
        (e) => {
            setValue(e.target.value);
        }, []);
    return [value, handler];
}

를 사용 할 경우 next에서 warning을 하는데요, 내용은

Anonymous arrow functions cause Fast Refresh to not preserve local component state.

Please add a name to your function, for example:

Before

export default () => <div />;

After

const Named = () => <div />;
export default Named;

입니다.

여기 warning에 나온대로 useInput.js의 내용을

const useInput = (initialValue = null) => {
    const [value, setValue] = useState(initialValue);
    const handler = useCallback(
        (e) => {
            setValue(e.target.value);
        }, []);
    return [value, handler];
}


export default useInput;

으로 수정해서 사용은 하고 있지만,  이 이슈, 익명 화살표 함수를 사용했을 때 왜 Fast Refresh가 되고, local component state를 왜 preserve 하지 못하는지 궁금해서 질문 드립니다...!

next버전은 9.5.1을 사용하고 있습니다..!