React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기

#2-1 _app.js로 레이아웃 분리하기

정중식 2020. 1. 6. 17:45
useCallback 은 useMemo와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데요, 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있습니다.
우리가 방금 구현한 Average 컴포넌트를 보면, onChange 와 onInsert 라는 함수를 선언해주었습니다. 이렇게 선언을 하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성됩니다. 대부분의 경우에는 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화 해주시는 것이 좋습니다.

Hoock

=>

 

import React, { useState, useCallback } from "react"; 

 

const useInput = (initValue = null) => {

    const [value, setter] = useState(initValue);

    const handler = useCallback(e => {

      setter(e.target.value);

    }, []);

    return [value, handler];

  };

 

 

성능문제

  - 각 컴포넌트마다 Head 컴포넌트가 겹쳐서(레이아웃중복) 성능문제 및 유지보수의 어려움이 발생
(form을 입력하면 위에 head도 같이 리렌더링되는 현상발생)
f12 리액트데비툴즈를 키고, 폼을 입력하면 헤더도 같이 렌더링됨


해결 방안

-중복된 컴포넌트 분리(최적화)

  - pages폴더-> _app.js 파일 생성

    ( _app.js는 react next가 지정해놓은 레이아웃파일임, pages에있는 모든 파일들이 _app.js를 자동으로 부모로 인식함  pages는 라우팅이라 생각하면 됨)

   (children를 사용하는 방식과 유사함)

 

- _app.js

   -  페이지의 공통적인 부분을 모아줌

   -  _app.js는 next에서 넣어주는 props로 Component라는걸 받음 (임폴트 안시켜줘도됨)

      이 Component는 children이라고 생각하면 될듯 하위 컴포넌트들이 이곳으로 다 들어가게됨

import React from "react";
import Head from "next/head";
import PropTypes from "prop-types";
import AppLayout from "../components/AppLayout";

const NodeBird = ({ Component }) => {
  return (
    <>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css"
        />
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </>
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType
};

export default NodeBird;

 

_app 외에도 next에서 제공해주는 _document.js 와 _error.js 등등이있음

 

리액트 넥스트에있는 기능들의 파일인데, 직접 작성해줄경우 커스터마이징이 가능함

 

저작자표시