React Component 나누는 기준, 메모이제이션?, useRef, useMemo, useCallback

React에서 Component를 나누는 기준

재사용성

DRY - Don't Repeat Yourself

 

단일책임

SR - Single Responsibility

useMemo, useCallback등을 통한 최적화를 하는 이유?

- 함수형 컴포넌트는 단순히 그냥 함수이다. jsx를 반환하는 함수이다.

- 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출하여 실행되는 것을 의미한다.

함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다.

- 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다.

하위 컴포넌트에서 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리렌더링 되는 것이 기본 원칙이다.

Memoization

메모이제이션은 이전에 사용된 값을 저장해두고 다시 접근하게 되면 이전에 사용된 값을 반환하여 성능을 향상시키는 기술이다. 

useRef

useRef는 React에서 DOM요소에 대한 참조를 만들 때 사용되는 훅입니다. useRef 함수를 사용하면 함수형 컴포넌트에서도 DOM에 직접 접근이 가능합니다. (아래 예시 코드에서 useEffect 내부에서 inputRef.current.focus()처럼 접근이 가능)

import React, { useRef, useEffect } from 'react';

const ExampleComponent = () => {
  // useRef를 사용하여 input 요소에 대한 참조를 생성합니다.
  const inputRef = useRef(null);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 input 요소에 자동으로 포커스를 설정합니다.
    inputRef.current.focus();
  }, []); // 빈 의존성 배열은 컴포넌트가 마운트될 때 한 번만 실행됩니다.

  return (
    <div>
      {/* useRef로 생성한 참조를 input 요소에 연결합니다. */}
      <input ref={inputRef} type="text" />
      <button onClick={() => alert(inputRef.current.value)}>
        얼럿에 현재 input 값 표시
      </button>
    </div>
  );
};

export default ExampleComponent;

 

useMemo

특정 값을 메모이제이션한다. 특정한 값을 재사용하기 위해 사용된다.

import React, { useMemo } from 'react';

const ExampleComponent = ({ a, b }) => {
  // a 또는 b가 변경되지 않는 한 sum의 이전 값을 사용
  const sum = useMemo(() => {
    return a + b;
  }, [a, b]);

  return <p>Sum: {sum}</p>;
};

useCallback

특정 함수를 메모이제이션한다. 특정한 함수를 재사용하기 위해 사용된다. 

자식 컴포넌트에 함수를 props로 줄 때 useCallback을 사용하여 리렌더링을 방지하자.

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    // 콜백 함수 내용
  }, []); // 의존성 배열이 비어있으면 컴포넌트가 마운트될 때만 함수를 생성

  return <ChildComponent onClick={handleClick} />;
};