23/11/10 til 리액트 숙련주차(3)

import React, { useState } from "react";     //APP.jsx 파일이다.

import Box1 from "./components/Box1";    // 별도의 컴포넌트 폴더에 박스 원투쓰리 컴포넌트 넣어놓음

import Box2 from "./components/Box2";     //그것을 임포트 해줘야함.

import Box3 from "./components/Box3";

function App() {                                           // 버튼을 두개두고 누르면 카운트가 변하는 예제

  console.log("App컴포넌트 랜더링");     //요 콘솔로그로 인해 리랜더링시 요 글자가 찍힌다.

  const [count, setcount] = useState(0);

  const plusbtn = () => {

    setcount(count + 1);

  };

  const minusbtn = () => {

    setcount(count - 1);

  };

 

 const initcount = () => {    //요건 셋카운트를 0으로 둬서 카운트를 0으로 하게 설정

    setcount(0);

  };

  return (

    <>

      <h3>카운트 예제</h3>

      <p>현재 카운트 : {count}</p>                 //여기에 작스문법으로 카운트를 줘서 카운트 확인

      <button onClick={plusbtn}>+</button>   //업버튼

      <button onClick={minusbtn}>-</button>    /다운버튼

      <div

        style={{

          display: "Flex",

          marginTop: "10px",

        }}

      >

        <Box1 />                                    //자식 컴포넌트인 박스 원투 쓰리 호출

        <Box2 initcount={initcount} />   //박스2컴포넌트는 인잇카운트함수를 프롭스로 넘겨준다.

        <Box3 />

      </div>

    </>

  );

}

export default App;

 아래는 자식 컴포넌트 박스 1

import React from "react";    /박스  ,3 도 동일하게 생겼다.

function Box1() {

  console.log("박스1 랜더링");    //리 랜더링시 이 글자가 찍힌다.

  return (

    <div

      style={{                                // 앱컴포넌트의 버튼을 클릭하여 카운트가 리랜더링 될시 별도의 컴포넌트인

        width: "100px",              //별도의 자식컴포넌트인 박스 1,2,3도 리랜더링 된다. 

        height: "100px",          //이때 이것은 불필요한 랜더링이다.

        color: "white",

        background: "red",

      }}

    >

      box1

    </div>

  );

}

export default React.memo(Box1);   //이것을 해결하는 것이 React.memo를 붙여서 익스포트하면 자식컴포넌트 

                                                       //가 리랜더링 되지 않는다.

아래는 자식 컴포넌트 박스2

import React from "react";      //박스2컴포넌트

function Box2({ initcount }) {           //프롭스 인잇카운트 함수를 받는다. 파라미터 자리에

  console.log("박스2 랜더링");

  return (

    <div

      style={{

        width: "100px",

        height: "100px",

        color: "white",

        background: "blue",

      }}

    >

      box2

      <div>

        <button onClick={initcount}>초기화</button>    //다른건 박스 1,3와 같은데 여기만 온클릭에 카운트초기화

      </div>                                                                 //함수를 달아준다.이러면 카운트초기화함수는 앱컴포넌트에 

    </div>                                                            //있기 때문에 함수는 오브젝트와 같은 거라 리랜더링되면서

  );                                                                    //함수가 새로운 주소값을 받는 느낌이기때문에 그함수의 변화를

}                                                                   //캐치해서 박스2도 리랜더링이 되버린다.

export default React.memo(Box2);              //여기에 리액트 메모를 했음에도

 

import React, { useCallback, useState } from "react";   //이제 그럴 떄 유즈 콜백을 쓴다. 

 

  const initcount = useCallback(() => {    //앱컴포넌트의 이닛카운트 함수를 유즈콜백으로 이렇게 해준다.

    setcount(0);

  }, []);                 //대괄호는 의존값?      // 이렇게 하면 최초 랜더링 시에만 함수가 변경되고 리랜더링시

                        //함수 변경이 없으므로 자식컴포넌트인 박스2도 리랜더링이 되지 않는다.

                      //만약 대괄호안에 count를 넣는다면 count의 값에 의존하기 때문에 카운트 변화에 맞춰 
                     //함수도 리랜더링 된다.

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

import React from "react";

import Heavycom from "./components/Heavycom";    //자식컴포넌트에 작업시간이 긴함수를 포함하고 있을때 

                                                                                       //그 값을 메모이제이션하는 예제

function App() {                                                           

  return (

    <>

      <nav>

        <Heavycom> </Heavycom>          //자식컴포넌트 헤비컴 호출

      </nav>

      <footer></footer>

    </>

  );

}

export default App;

 

import React, { useState } from "react";

function Heavycom() {

  const [count, setcount] = useState(0);

  const heavywork = () => {

    for (let i = 0; i < 1000000000000; i++) {

      return 100;

    }

  };

  const value = heavywork();               //위에 포문은 무거운 오래걸리는 작업이다. 

  return (

    <>

      <p>나는 엄청 무거운 컴포넌트</p>

      <button

        onClick={() => {

          setcount(count + 1);                   //이때 셋스테이트를 하면 헤비컴 컴포넌트가 리랜더링되면서

        }}                                               //그때마다 쓸데없이 헤비워크 함수가 재시동 되면서 카운트가 천천히 오름

      > 

        카운트가 올라가유

      </button>

      {count}            //여기가 카운트

    </>

  );

}

export default Heavycom;

 

  const value = useMemo(() => heavywork(), []);  //이제 이럴때 저 함수 호출을 유즈메모 훅을 이용하면

                                                                              //최초의 랜더링시의 밸류값을 기억하고 있어서

                                                                               //쓸데 없는 리랜더링을 줄일수 있다.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~