📍 PureComponent

PureComponent가 Component와 다른 점은 React의 생명 주기 메서드중 하나인 shouldComponentUpdate를 어떻게 쓰는가 하는 부분이다.

특징

• props랑 state를 얕은 비교를 통해 비교한 뒤 변경된 것이 있을때는 true를 return 해서 리렌더링 하고, 변경된 것이 없을때는 false를 리턴한다.

얕은 비교 (shallow-compare)
1. 변수와 문자열에서는 값을 비교한다.
2. 객체에서는 reference 값을 비교한다.

Component와 차이점

Component는 shouldComponentUpdate를 따로 설정해주지 않은 경우 항상 true를 반환한다. 따라서, setState가 실행되면 state, props의 변경 여부를 신경쓰지 않고 무조건적으로 Component를 업데이트한다.
하지만 PureComponent의 경우 현재 state, props와 바뀔 state, props를 비교하여 업데이트 여부를 결정하게 되는 것이다.

📍 React.memo

React.memo는 고차 컴포넌트(Higher Order Component)이다.

특징

• useMemo처럼 Memoization 기법으로 동작함.
• props가 이전과 동일한 값이면 재렌더링하지 않고, 다른 값이면 재렌더링하여 컴포넌트를 다시 만들어 반환함.
• React.memo에 쓰인 컴포넌트 안에서 구현한 state가 변경되면 컴포넌트는 재렌더링이 됨.

props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작이다. 다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교 함수를 제공하면 된다.

📍 Ref

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

사용처

• 자식 컴퍼넌트를 직접 접근하여 수정할 때
• DOM 엘리먼트를 접근하고 싶을 때

예시

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• third-party DOM 라이브러리를 React와 같이 사용할 때

Ref 생성

1. createRef을 통한 ref 설정
   컴포넌트 내부에서 멤버 변수로 React.createRef()를 담고, 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props를 넣어주면 ref설정이 완료된다. 설정한 뒤 나중에 ref를 설정해 준 DOM에 접근하려면 this.input.current를 조회하면 된다.
   이 기능은 리액트 v16.3부터 도입되었으며 이전 버전에서는 작동하지 않는다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

2. 콜백 함수를 통한 ref 설정
   ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달 받아 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설쟁해 준다.

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // DOM API를 사용하여 text 타입의 input 엘리먼트를 포커스한다.
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 마운트 되었을 때 자동으로 text 타입의 input 엘리먼트를 포커스한다.
    this.focusTextInput();
  }

  render() {
    // text 타입의 input 엘리먼트의 참조를 인스턴스의 property
    // (예를 들어`this.textInput`)에 저장하기 위해 `ref` 콜백을 사용한다.
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

🪄 마치면서

shouldComponentUpdate를 신경쓰지 않아도 되는 것은 PureComponent와 React.memo 둘 다 해당되는 것 같은데, 어떨 때 PureComponent를 사용하고 React.memo를 사용하는 것인지는 아직 잘 모르겠다.