기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법
- 고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용
// 훅
function HasMounted({childrun}){
const hasMounted = useHasMounted();
return children(hasMounted);
}
// HOC
function withHasMounted(Compo){
return (
function(props){
const hasMounted = useHasMounted();
return <Compo {...props} hasMounted={hasMounted} />;
}
)
}
// class-component
class ClassCompo extends React.Component {
render(){
const {hasMounted}=this.props;
return <p>{hasMounted ? 'yes' : 'no'}</p>;
}
}
export default withHasMounred(ClassCompo);
// 훅 : 일정시간 값이 변하지 않으면 callback 함수를 호출
function useDebounce({callback, ms, args}){
useEffect(()=>{
const id = setTimeOut(callback, ms);
return () => clearTimeout(id);
},args)
}
function Profile(){
let [name, setName] = useState('');
let [nameTemp, setNameTemp] = useState('');
useDebounce({
callback : ()=> setName(nameTemp),
ms:1000,
args : [nameTemp],
})
return (
<div>
<p>{name}</p>
<input type='text' value={nameTemp} onChange={e=>setNameTemp(e.target.value)}/>
</div>
)
}
// HOC
function Debounce({children, ...props}){
useDebounce(props);
return children
}
// class-component
class ClassCompo extends React.Component {
state = {name: '', nameTemp: ''};
render(){
const {name, nameTemp} = this.state;
return (
<Debounce
callback={()=> this.setState({ name: nameTemp })}
ms={1000}
args={[nameTemp]}
>
<p>{name}</p>
<input
type='text'
onChange={e=>this.setState({ nameTemp: e.target.value })}
value={nameTemp}
/>
</Debounce>
)
}
}
export default ClassCompo;