React에서 Custom hook 사용법에 관하여 질문있습니다.

react custom hook이란 로직의 재사용성을 위하여 로직들을 묶어놓는 용도로 사용한다고 배웠는데 종종 custom hook에서 component까지 render하는 함수를 제공하는 케이스들을 본것같아 궁금한것이 있습니다. 질문이 두가지 있습니다. 1. Custom hook에서 component 렌더링해주는 함수까지 제공하는 것이 custom hook의 용도에 알맞은 것일까요? 관련된 component를 제공해주는 것까지 재사용할 로직에 포함된다고 생각하면 되는걸까요? 2. 두번째는 react 렌더링에 관련된 질문입니다. custom hook에서 export default const useComponent = () => { const [value, setValue] = useState(''); const InputComponentByCustomHook = () => { return (<input value={value} onChange={(e)=>setValue(e.target.value)} />); } return [InputComponentByCustomHook ]; } 로 선언해준 후, 이를 app에서 사용하는 경우에 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> <InputComponentByCustomHook /> </>) } 이 경우에는 자꾸 input에 값을 입력할때 한글자 한글자마다 focus가 풀리길래 왜 그런가에 대해서 알아보니 value값이 변경될때마다 InputComponentByCustomHook컴포넌트가 계속 새롭게 만들어져서 focus가 풀린다고 하더라구요. 그런데 아래와 같이 const App = () => { const [RenderedComponentByCustomHook] = useComponent() return (<> { InputComponentByCustomHook() } </>) } 함수를 실행하여 return으로 컴포넌트를 전달해주는 경우에는 input에 값을 입력해도 focus가 풀리지않습니다. value 값이 변경될때마다 InputComponentByCustomHook 함수는 계속해서 재생성되는 것은 알겠는데 앞선 케이스와 달리 이친구는 계속 input 컴포넌트가 유지되는 이유가 무엇일까요? 함수가 재생성되더라도 return에 전달되는 컴포넌트들은 재생성되지 않는 것인가요?

이 질문이 도움이 되었나요?

'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

추천해요 2

보충이 필요해요 0

익명님의 질문