React13일차-Hook2

안녕하세요 다들 새해복 많이 받으시고 시작하겠습니다.

create react app 만드시고 component폴더 안에 example1 만들어주세요

import { useState, useEffect } from "react";

export default function useWidth() {

  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {

    const resize = () => {

      console.log("resize", width, window.innerWidth);

      setWidth(window.innerWidth);

    };

    console.log("add");

    window.addEventListener("resize", resize);

    return () => {

      console.log("remove");

      window.removeEventListener("resize", resize);

    };

  }, []);

  return width;

}

내부내용을 이렇게 채워주세요

설명을 해보면 window.innerWidth는 현재 윈도우 창크기를 말합니다.

const [width, setWidth] = useState(window.innerWidth); 여기서 기본적으로 width라는 변수에서현재창크기를 넣어 줍니다.

그리고 resize 라는 변수에 width를 현재 창크기로 변경해주는 함수를 넣어줍니다.

그럼이제 

 window.addEventListener("resize", resize); 이걸로 resize=창크기변경  될때마다 resize 라는 함수를 실행 시킵니다.

그럼 자동으로 width값이 변경된 창의 크기로 바뀝니다.

  return () => {
      console.log("remove");
      window.removeEventListener("resize", resize);
    };
  }, []);

이부분을 보면 윈도우창크기가 바뀌는지 안바뀌는지 계속 확인하는 것을 없애는 겁니다.

[]이게 있으니까  이요소가 unmount될때 없애게 될것입니다. 

만댝 [width]라면 값이 변경될때마다 없어지고 다시만들어지고를 반복할것입니다.

 

그리고 App.js 도 

import logo from "./logo.svg";

import "./App.css";

import example from "./component/example1";

function App() {

  console.log("wid");

  const wid = example();

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        {wid}

      </header>

    </div>

  );

}

export default App;

이렇게 채워주세요

이거는 

wid 라는 변수에 우리가 만든 함수의 return값을 저장하는것입니다. 그럼 우리가 return한 width가 반환될것이고 

그값이  변경될때마다 다시 redner되므로 그 wid는 바뀔것입니다.

hook폴더 만들고 usehasmmounted.jsx 파일 만들어 주세요

import React from "react";

export default function useHasMounted(Component) {

  class NewComponent extends React.Component {

    state = {

      hasmount: false,

    };

    render() {

      const { hasmount } = this.state;

      return <Component {...this.props} hasmount={hasmount} />;

    }

    componentDidMount() {

      this.setState({ hasmount: true });

    }

  }

 

  return NewComponent;

}

작성

이걸 설명해보면 

랜더할때 컴포넌트안에는 기존에 전달받은거 뿐만 아니라 state에 있는 hasmount라는 state값도 전달하게 됩니다.

그리고 app.js 를

import logo from "./logo.svg";

import "./App.css";

import example from "./component/example1";

import auseHasMounted from "./hook/usehasmmounted";

function App({ hasmount }) {

  console.log(hasmount);

  const wid = example();

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        {wid}

      </header>

    </div>

  );

}

export default auseHasMounted(App);

작성 해주세요 

auseHasMounted(App) 이걸로인해서 newcomponent가 반환이될꺼고 App내부에는

 {...this.props} hasmount={hasmount}

가 생기게 될것입니다. 그래서 hasmount를 출력할수 있게 됩니다.

hook/whm.js만들고

import { useEffect, useState } from "react";

export default function Whm() {

  const [hasmounte, setHasMount] = useState(false);

  useEffect(() => {

    setHasMount(true);

  }, []);

  return hasmounte;

}

작성 결국 실행될때 hasmounte가 mount될때true로 바껴서 전달되게 됩니다.

app.js를 

import logo from "./logo.svg";

import "./App.css";

import example from "./component/example1";

import auseHasMounted from "./hook/usehasmmounted";

import Whm from "./hook/whm";

function App({ hasmount }) {

  const wid = example();

  const whm = Whm();

  console.log(hasmount, whm);

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        {wid}

      </header>

    </div>

  );

}

export default auseHasMounted(App);

수정

이렇게 둘다 마운트 되기전에는 false였지만 되고나서는 true로 바뀌게 되었습니다.

두개의 차이는 전자는 새로의 컴포넌트 가 반환되서 props가 전달되는거고 

후자는 그냥 데이터만 전달이되는 개념입니다.