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

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

useInput 커스텀 훅 동작 흐름 질문드립니다.

작성

·

127

0

안녕하세요. 강의 잘 보고있습니다.

다름이 아니라 커스텀 훅 동작 흐름이 잘 이해가 안가서 질문을 드립니다.

const [email, onChangeEmail ] = useInput('');

const [password,_1,setPassword] = useInput('');

type ReturnTypes<T=any> = [T,(e:any) => void, Dispatch<SetStateAction<T>>];
export const useInput = <T = any>(initialData:T) : ReturnTypes<T> =>{ 
    
    const [value,setValue] = useState(initialData);
    const handler = useCallback(e =>{
        setValue(e.target.value);
    },[])
    return [value,handler,setValue];
}

여기서 각 state들의 초기값이 ''이게 아닌 useInput에서 return하는 [value,handler,setValue] 이게 맞는건가요?

그래서 HTML에서 onChangeEmail을 호출하면 useInput의 2번째 매개변수로 반환된 handler를 실행시켜서

setValue를 실행시키고 다시 리턴되서 배열 구조분해 할당을 통해서 value가 email자리로 간거고

setPassword는 직접 setValue를 실행시켜서 위와 같이 구조분해 할당으로 value가 password 자리로 간거같은데

동작 흐름이 이게 맞는걸까요??

typescript babel Socket.io 웹팩 react 클론코딩

답변 1

0

제로초(조현영)

지식공유자

말씀하신게 맞습니다. useInput 함수 내부 내용이 그대로 컴포넌트 안에 있다고 생각하시면 됩니다.

질문자

답변 감사드립니다.

그런데 이해가 안가는 부분이 하나 더 있는데

질문탭에서 커스텀 훅 관련해서 찾아보니까 커스텀 훅을 사용하는 이유가 한 컴포넌트에서 여러개의 훅을 사용할 때 편리하게 사용하려고 한다는 답변을 봤는데

이 부분이 이해가 되질 않아서요..

어짜피 각각의 state마다 setState는 선언을 해 줘야하고 html에서는 그 선언된 각각의 setState를 호출할 텐데 왜 커스텀훅이 사용하기 편리한건가요??

제로초(조현영)

지식공유자

useInput을 쓰면 훅이 두 개에서 하나로 줄어드는데요? useInput 내부의 5줄이나 되는 코드를 한 줄로 줄인 겁니다.

질문자

제가 이해가 안됐던 부분은

1. 기존 useState를 그대로 사용했을 때는

const [email, setEmail] = useState();

로 선언하고 html에서는 이벤트 발생 시 setEmail을 호출

2. useInput을 사용했을 때는

const [email,onChangeEmail] = useInput('');

으로 선언하고 html에서 이벤트 발생시 onChangeEmail을 호출

여기까지는 코드가 간단해서인지는 몰라도 제가 생각하기에 로직 흐름이 달라지는게 없고 오히려 useInput을 작성함으로 코드 작성량이 늘어나는 것 처럼 보이는데

만약 강의상의 useInput의 예제가 간단해서 handler 내부에 setState만 써도 되는 상황이였고

handler에서 추가적인 로직을 사용해서 이 후 같은 데이터 가공처리를 하는 state에 적용을 하는것이라면 이해가 가긴 합니다만

혹시 이 이유가 아니라면 어떤 이유가 있을까요??

제로초(조현영)

지식공유자

useCallback이 사라진만큼 코드가 줄어든거죠. 중복된 로직을 함수로 뺐으니까 줄거든겁니다.

useState + useCallback -> useInput 하나

작성한 질문수