[React] React Devtools , shouldComponentUpdate

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

React Developer Tools

 

props를 사용하면 렌더링이 자주 일어나서 성능이 저하된다. 

React Devtools를 이용하면 리액트 컴포넌트를 확인할 수 있음!!

크롬> 확장프로그램 > ReqctDEveloper Tools 검색 , 설치

이것을 다운받게되면 크롬의 개발자도구(f12)에서 리액트라는 탭이 생긴다 

 

- 만약 리액트 탭이 안생겨있다면 ?

확장프로그램에서 React Developer Tools에서 > 상세보기 > 파일 URL에 대한 엑세스 허용! 

(이것도 안되면 강력새로고침!)

개발자도구에 표시되는 컴포넌트

현재 개발모드로 되어있어서 빨간색으로 표시되어있다. 

이부분을 배포모드로변경하려면 (배포모드는 파랑색)

1. webpack.config에서 mode를  production으로 수정

2. process.env.NODE_ENV = 'production' ; 을 위에 써준다 ( <= 환경변수 설정함)

 

webpack.config

process.env.NODE_ENV = 'production' ;

module.exports = {
  name: "word-relay-setting",
  mode: "production"
  devtool: "eval", 
  resolve: {
    extensions: [".js", ".jsx"], 
  },

 

 

render가 되는 시점이 언제일까? 

바로 state나 props가 바뀔때 !!

 

개발자도구 > React탭에서 톱니바퀴 > Highlight updates when components render. 선택 

이러면 랜더가 될때마다 컴포넌트가 깜빡거리게 된다

하늘색 선이 나오는데 빠른시간안에 많이 일어날 수 록 색이 점점빨개짐

빨개진 선이 문제를 탐지할 수있는 첫번째 방법임~!

 

예제 )

import React, {Component} from 'react';

class Test extends Component {
    state = {
        counter:0,
    };

    onClick = () => {
        this.setState({});
    };

    render(){
        console.log('렌더링', this.state);
        return (
            <div>
                <button onClick={this.onClick}>클릭</button>
            </div>
            )
    }
}

export default Test;

state나 props를 바꿔야지 렌더링이 된다고 했는데, 위의 코드에서는 state를 비워둔상태.

 

클릭버튼을 누를때마다 렌더링이 되고 있다.

setState만 호출하면 바뀜!

 

 

 

ShouldComponentUpdate 

기존 코드는 하나의 state를 수정해도 모든 컴포넌트가 랜더링하도록 되어 있음. 

  shouldComponentUpdate(nextProps, nextState, nextContext){
        // 어떤 경우에 렌더링을 해줘야할지 적어줌
        if(this.state.counter !== nextState.counter){
            return true;
        }
        return false;
    }

 

이걸 설정하면 이제 랜더링이 되지 않는다!! 굿~! 

뭔가 바뀌는게 없으면 바뀌지 않음!!