-
#2-1 _app.js로 레이아웃 분리하기React로 nodebirdSNS 만들기 (인프런)/#2 SNS 화면 만들기 2020. 1. 6. 17:45
useCallback 은 useMemo와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하는데요, 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있습니다.
우리가 방금 구현한 Average 컴포넌트를 보면, onChange 와 onInsert 라는 함수를 선언해주었습니다. 이렇게 선언을 하게 되면 컴포넌트가 리렌더링 될 때마다 이 함수들이 새로 생성됩니다. 대부분의 경우에는 이러한 방식이 문제가 되지 않지만, 컴포넌트의 렌더링이 자주 발생하거나, 렌더링 해야 할 컴포넌트의 개수가 많아진다면 이 부분을 최적화 해주시는 것이 좋습니다.=>
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 등등이있음
리액트 넥스트에있는 기능들의 파일인데, 직접 작성해줄경우 커스터마이징이 가능함
'React로 nodebirdSNS 만들기 (인프런) > #2 SNS 화면 만들기' 카테고리의 다른 글
#2-7 컴포넌트 분리하기 (0) 2020.01.07 #2-6 프로필 화면 만들기 (0) 2020.01.07 #2-5 메인 화면 만들기 (0) 2020.01.07 #2-4 커스텀 훅 재사용 및 홈 화면 설정,useCallback (0) 2020.01.07