정보실

웹학교

정보실

Reactjs React 앱의 6 가지 빠른 최적화 팁 (4)

본문

React 성분 메모하기 


메모의 개념은 새로운 것이 아닙니다. 고가의 함수 호출을 저장하고 동일한 입력이 다시 발생할 때 캐시 된 결과를 반환하는 기술입니다. React의 Memoization은 상태 변화가 가능한 빨리 발생하도록 데이터 계산을 메모함으로써 작동합니다. 이것이 어떻게 작동하는지 이해하려면 아래의 React 컴포넌트를 살펴보십시오.

const GroceryDetails = ({grocery, onEdit}) => {
    const {name, price, grocery_img} = grocery;
    return (
        <div className="grocery-detail-wrapper">
            <img src={grocery_img} />
            <h3>{name}</h3>
            <p>{price}</p>
        </div>
    )
}

위의 코드 샘플에서 GroceryDetails의 모든 하위 항목은 소품을 기반으로 합니다. 소품을 변경하면 GroceryDetails가 다시 렌더링 됩니다. GroceryDetails가 변경되지 않는 구성 요소 인 경우 메모해야 합니다. 이전 버전의 React (<V16.6.0) 사용자는 JavaScript 용 메모 라이브러리 인 moize를 사용합니다. 아래 구문을 살펴보십시오.

import moize from 'moize/flow-typed';

const GroceryDetails = ({grocery, onEdit}) =>{
    const {name, price, grocery_img} = grocery;

    return (
        <div className="grocery-detail-wrapper">
            <img src={grocery_img} />
            <h3>{name}</h3>
            <p>{price}</p>
        </div>
    )
}

export default moize(GroceryDetails,{
    isReact: true
});

위의 코드 블록에서 moize는 전달 된 소품과 컨텍스트를 GroceryDetails에 저장하고 둘 다 사용하여 구성 요소에 대한 업데이트가 있는지 감지합니다. props와 context가 변경되지 않는 한 캐시 된 값이 반환 됩니다. 이것은 매우 빠른 렌더링을 보장합니다.


이후 버전의 React (> = V16.6.0)를 사용하는 사용자의 경우 moize 대신 React.memo를 사용할 수 있습니다.


const GroceryDetails = ({grocery, onEdit}) =>{
    const {name, price, grocery_img} = grocery;

    return (
        <div className="grocery-detail-wrapper">
            <img src={grocery_img} />
            <h3>{name}</h3>
            <p>{price}</p>
        </div>
    )
}

export default React.memo(GroceryDetails);

서버 측 렌더링 사용을 고려하십시오. 


SSR (Server-Side Rendering)은 백엔드 시스템에서 실행하는 동안 마크 업을 렌더링 하는 프론트 엔드 프레임 워크의 기능입니다.


단일 페이지 응용 프로그램과 함께 SSR을 활용해야 합니다. 사용자가 JavaScript 파일이 로드 되기를 기다리지 않고 애플리케이션의 사용자는 전송 된 초기 요청이 응답을 반환하자마자 완전히 렌더링 된 HTML 페이지를 받습니다. 일반적으로 서버 측 렌더링 응용 프로그램을 사용하면 클라이언트 렌더링 응용 프로그램보다 콘텐츠를 더 빨리 받을 수 있습니다. React의 서버 측 렌더링을 위한 멋진 솔루션으로는 Next.js와 Gatsby가 있습니다.


개요 


이러한 개념에 익숙하지 않은 일반 초보자에게는 상태 처리에서 구성 요소 생성에 이르기까지 React를 시작하는 방법에 대해 이 과정을 확인하는 것이 좋습니다. React 애플리케이션에서 페이지 로드 시간 최적화의 중요성을 과소 평가할 수 없습니다. 모범 사례를 따르면 앱이 더 나은 SEO를 촉진하고 전환율이 높아질 뿐만 아니라 오류를 보다 쉽게 ​​감지 할 수 있습니다. 이러한 개념에는 많은 노력이 필요할 수 있지만 기회를 줄 가치가 있습니다. Tony Quetano의 Memoize React Components 및 Selva Ganesh의 프로덕션에서 Webpack gzipped 파일을 제공하는 방법과 같은 멋진 게시물이 이를 작성하는 데 도움이 되었습니다.





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 4회 ]  작성일19-08-14 17:53

웹학교