클래스형 컴포넌트에서 커스텀훅 사용하기

기존 클래스형 컴포넌트에서 커스텀 훅을 사용할 수 있는 방법

• 고차 컴포넌트(이하 HOC) or 랜더 속성값(render-props) 를 사용하여 클래스형 컴포넌트에서 커스텀 훅 사용

return (O) : 반환값이 있는 경우

useHasMounted()

// 훅
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);

return (X) : 반환값이 없는 경우

useDebounce()

// 훅 : 일정시간 값이 변하지 않으면 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;

참고 : 책 : 실전 리액트 프로그래밍/이재승 저