React 기초 학습 12.ref사용, if문 for문, 라이프사이클 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

React에서 재 렌더링이 발생할때 성능을 생각하면 state나 props가 변경되는 것을 파악해서 재 렌더링이 필요없는 컴포넌트의 재 렌더링을 막아야한다.

 

즉 a 컴포넌트만 달라져야하는 부분이 있을 경우, 기능을 나눌 수 있다면 a와 b로 컴포넌트를 분리해야한다.

성능 최적화를 하기위해서 shouldComponent, pureComponent, useMemo, useCallback을 사용하는것이 좋다.

이것을 알기 위해서는 useEffect를 알아야한다. (이건 더 뒤에 강의에서)

 

class 컴포넌트와 함수형 컴포넌트의 차이.

class 컴포넌트는 render 만 재 렌더링이 되는데 함수형 컴포넌트 같은 경우에는 전체가 다시 재 렌더링이 된다.

함수형 컴포넌트같은 경우 useRef하게 될 경우 

 

ref할 경우 접근

inputEl; 
onRefInput = (c) => { 
	this.inputEl = c; 
}; 

this.inputEl.focus(); 

 

useRef할 경우 접근

import React, {useRef} from 'react';

const Test = () => {
	// 초기 셋팅
	const = inputEl = useRef(null);
	
    const onButtonClick = () => {
    	// useRef는 필수로 current로 접근해야한다.
    	inputEl.current.focus();
    }

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>버튼</button>
    </>
  );
};

 

jsx에서 if문을 쓰고 싶다면? jsx에서 아래와 같이 쓰면된다.

{
    (() => {
        if(조건){

        }else{

        }
    })()
}

 

반복문을 쓰고 싶다면?

{
    (() => {
        const array = [];
        for(){
            array.push();
        }

        return array;
    })()
}

지저분하다고 느낀다면 자식 컴포넌트로 빼는것이 좋다.

이때 배열이라면 key값이 있어야한다.

return [
  <div key="">사과</div>,
    <div key="">사과</div>,
    <div key="">사과</div>,
];

 

컴포넌트가 쓸데없이 재렌더링이 된다 싶다면 구글 확장프로그램을 이용해서 확인을 해본다.

그 후에 pureComponent를 사용할지 결정하면되는데,

pureComponent는 아래와 같이 선언하는 부분을 변경한 뒤 사용하면된다.(Class 컴포넌트에 해당)

import React, { Component } from 'react';

class Test extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// 아래처럼 변경
import React, { pureComponent } from 'react';

class Test extends pureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

pureComponent는 props와 state를 얕게 비교하여 변경되었다면 재 렌더링을 해주는 것을 자동으로한다.

만약 복잡한 객체를 비교해야한다면 pureComponent가 아닌 forceUpdate를 사용해야한다고한다(이건 나중에공부하기!)

 

라이프사이클

렌더링이 실행되면 리액트가 돔을 붙여주는 순간 특정한 동작을 할 수 있다.

componentDidMount는 렌더링이 처음 실행되고 성공적으로 실행되었을 때 발생하는 라이플사이클 중에 하나이다.

그 다음 setState로 재렌더링이 되어야할때는 실행되지 않는다.

재렌더링이 실행될 때에는 componentDidUpdate가 일어나며 컴포넌트가 제거될때, 그 직전에는 componentWillMount가 실행된다.

 

만약에 render안에 setState를 사용하면 무한루프가 된다.

render(){
	
    // (X)
    setState({});
    
	return(
    	<>
        	<div>안녕</div>
        </>
    );
};

따라서 render할때 setState의 작업을 하고 싶을때 라이프사이클을 맞게 사용하면된다.

 

class컴포넌트의 경우 constructor가 실행되고 (state나 메서드들)..

처음으로 render가 실행된다. 다음 componentDidMout가 실행되는데 그 전에 ref를 먼저 설정한다.

그리고 setState나 props가 변경될때 재 렌더링이 되면서 componentDidUpdate가 실행된다.

그리고 부모컴포넌트가 자식컴포넌트를 제거할때 자식컴포넌트에서는 componentWillunMount가 실행되고 그 컴포넌트는 소멸된다.

shouldComponentUpdate는 setState나 props가 변경되어 재렌더링이 일어날때 실행되는 시점과 같다.

클래스 -->
constructor -> render -> ref -> componentDidMount -> 
setState/props -> shouldComponentUpdate (true일때)-> 
render-> 
componentDidupdate -> 부모가 나를 삭제 -> componentWillunmount ->소멸

 

강의보면서 글을써서 의식의 흐름대로 쓰느라.. 정신이없는 글이되버리네..