강의 유튜브 주소 :
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 ->소멸
강의보면서 글을써서 의식의 흐름대로 쓰느라.. 정신이없는 글이되버리네..