React _ Custom Hooks

1. window 창 크기 출력

// ./src/hooks/useWindowWidht.js

import { useState, useEffect } from "react";

export default function useWindowWidth(){
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {

    const resize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", resize);

    return () => {
      window.removeEventListener("resize", resize);
    };
  }, []); // render 될 때마다 실행

  return width;
}

2. useHasMounted vs. withHasMounted

• useHasMounted: Mounted 됐을 때 알려줌

// ./src/hooks/useHasMounted.js 
// useState로 상태를 만들고 useEffect로 변경하는 형태

export default function useHasMounted(){
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(()=>{
    setHasMounted(true);
  }, []);

  return hasMounted;
}

• withHasMounted: (HOC) 인자로 넣어진 component에 hasMounted라는 props 포함

// ./src/hocs/withHasMounted.jsx
// 이미 만들어진 것을 props로 내보내는 형태
import React from 'react';

export default function withHasMounted(Component){
  class NewComponent extends React.Component{
    state = {
      hasMounted: false,
    };
    render(){
      const {hasMounted} = this.state;
      return <Component {...this.props} hasMounted={hasMounted} />;
    }
    componentDidMount(){
      this.setState({hasMounted: true});
    }
  }

  NewComponent.displayName = `withHasMounted(${Component.name})`;

  return NewComponent;
}

-> hoc보다 hooks 사용하는 트렌드이긴 하지만 알고는 있자!