[React] useState 대신 useRef를 사용해야 하는 경우

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

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    // 컴포넌트가 마운트되면 DOM 요소에 포커스를 설정합니다.
    myRef.current.focus();
  }, []);

  return <input ref={myRef} />;
};

export default MyComponent;

• useState
컴포넌트의 상태를 관리할 때 사용됩니다. 상태가 변할 때마다 컴포넌트를 다시 렌더링하고 싶을 때 주로 사용됩니다. 상태를 변경하면 해당 컴포넌트가 다시 렌더링됩니다.

• useRef
이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는 직접적으로 관련이 없는 값들을 저장할 때 사용됩니다.

• 컴포넌트의 렌더링과 관련이 없는 값들을 저장할 때

• DOM 요소에 대한 참조를 저장할 때

• 렌더링 과정에서 값이 변경되어도 다시 렌더링되지 않아도 되는 경우

useState 예제

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

useRef 예제

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

const Timer = () => {
  const intervalRef = useRef(null);
  const secondsRef = useRef(0);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      secondsRef.current += 1;
      console.log('Seconds:', secondsRef.current);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return (
    <div>
      <p>Timer: {secondsRef.current} seconds</p>
      <button onClick={() => clearInterval(intervalRef.current)}>Stop</button>
    </div>
  );
};

export default Timer;

useState를 사용한 예제

import React, { useState } from 'react';

const BigDataComponent = () => {
  const [data, setData] = useState('');

  const fetchData = () => {
    // 대용량 데이터를 가져온다고 가정
    // 이 데이터가 많을수록 렌더링이 지연될 수 있음
    const newData = 'Very large data...';
    setData(newData);
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      <p>Data Length: {data.length}</p>
    </div>
  );
};

export default BigDataComponent;

useRef를 사용한 예제

import React, { useRef } from 'react';

const BigDataComponent = () => {
  const dataRef = useRef('');

  const fetchData = () => {
    // 대용량 데이터를 가져온다고 가정
    // useRef를 사용하여 컴포넌트의 렌더링에 영향을 주지 않고 데이터를 설정
    const newData = 'Very large data...';
    dataRef.current = newData;
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      <p>Data Length: {dataRef.current.length}</p>
    </div>
  );
};

export default BigDataComponent;

• 렌더링과 무관한 값 보존
 useRef로 생성한 ref 객체의 current 속성에 할당된 값은 컴포넌트가 재렌더링되어도 변경되지 않습니다. 이는 useRef를 사용하여 컴포넌트의 렌더링과 관계없이 값이 유지되도록 할 수 있는데, 이는 일반적으로 컴포넌트의 상태가 아닌 값을 보존하는 데 유용합니다.
 

• 렌더링 사이클 동안 값이 변경되어도 렌더링을 트리거하지 않음
 useRef로 생성된 객체의 current 속성에 값을 할당하더라도 컴포넌트는 다시 렌더링되지 않습니다. 이는 useState와 다르게 상태 업데이트가 렌더링을 트리거하지 않고 값을 변경할 수 있다는 것을 의미합니다. 이러한 특성은 DOM 요소의 참조, 외부 라이브러리의 인스턴스 등과 같이 렌더링과 무관한 값들을 관리할 때 유용합니다.
 

리엑트 렌더링

1. 가상 돔(Virtual DOM)

2. 컴포넌트 렌더링 과정

• 초기 렌더링
리액트 애플리케이션이 시작될 때, 컴포넌트 트리가 렌더링되어 초기 UI가 생성됩니다.

• 상태나 속성 변경
사용자 상호작용 등의 이벤트에 의해 상태(state)나 속성(props)이 변경될 수 있습니다.

• 가상 돔 업데이트
상태나 속성이 변경되면 리액트는 해당 컴포넌트의 가상 돔을 업데이트합니다. 이 과정은 가상 돔의 변경 사항을 계산하는데, 이때 불필요한 렌더링이나 DOM 조작을 최소화하기 위해 효율적인 알고리즘을 사용합니다.

• 실제 DOM 업데이트
가상 돔의 변경 사항을 계산한 후에는 실제 DOM과 비교하여 변경된 부분만을 찾아내고 실제 DOM을 업데이트합니다. 이 과정에서 브라우저에 불필요한 렌더링이 발생하지 않도록 최적화되어 있습니다.
 

3. 재렌더링 최적화

• PureComponent와 React.memo
순수 컴포넌트(Pure Component)를 사용하여 컴포넌트의 재렌더링을 방지하거나, 함수형 컴포넌트에 React.memo를 사용하여 불필요한 재렌더링을 방지합니다.

• shouldComponentUpdate 또는 React.memo에 의한 컴포넌트 최적화
shouldComponentUpdate 또는 React.memo를 사용하여 컴포넌트의 재렌더링을 제어하고 최적화할 수 있습니다.

• 불변성 유지
불변성을 유지하여 상태를 변경할 때마다 새로운 객체를 생성하고 이를 통해 불필요한 렌더링을 방지합니다.

🚢 개발자 이직 준비, 어떻게 시작해야 할지 모르겠나요? 한 단계 더 도약하는 험난한 항해에서 든든한 메이트가 되어드리겠습니다.