[React] FC(Functional Component)와 lazy, memo

FC(Functional Component)란?

 FC는 React에서 함수형 컴포넌트를 정의할 때 사용되는 타입이다. TypeScript에서 FC라는 타입을 사용하여 컴포넌트를 정의할 때 사용된다. 함수형 컴포넌트는 컴포넌트를 더 간결하게 작성할 수 있으며, 클래스형 컴포넌트보다 메모리 관리 및 성능 면에서 장점이 있다. 또한 FC를 사용하게 되면 동기적 렌더링(컴포넌트를 호출할 때 실행되어 UI를 그림)을 하게 되어 컴포넌트가 즉시 렌더링되어야 할 때 유용하다.
 아래 예시를 같이 확인해보자. 

• 코드를 보면 클래스형 컴포넌트에 비해 함수형 컴포넌트의 코드가 더 간결한 것을 확인할 수 있다. 또한 함수형 컴포넌트에서는 Hooks를 사용해 상태(useState)와 사이드 이펙트(useEffect)를 관리하는 것을 확인할 수 있다. 함수형 코드에는 useMemo나 `useCallback` 같은 Hooks를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있는 장점이 있다.

// 함수형 컴포넌트
import React, { useState, useEffect } from 'react';

const App: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default App;

// 클래스형 컴포넌트
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

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

export default App;

React.lazy란?

위에서 FC에 대해 설명하면서 동기적 렌더링으로 작동 된다는 것을 알게 되었다. 하지만 이때 모든 컴포넌트를 한꺼번에 동기적으로 로드하면 초기 로딩 시간이 길어질 수 있다. 이를 해결하기 위해 비동기적 로딩을 사용해야할 때가 있는데, 이때 React.lazy을 사용하여 컴포넌트를 작은 단위로 나눈 후 필요할 때만 비동기적으로 로드하는 방식(코드 스플리팅)으로 성능을 최적화할 수 있다.
아래 예시를 확인해보자

• import()를 사용해 컴포넌트를 비동기적으로 로드하며, 이를 통해 필요한 시점에만 해당 컴포넌트를 로드할 수 있다. Suspense 컴포넌트는 비동기 컴포넌트가 로드될 때까지 대체 UI(fallback)을 표시할 수 있는 역할을 한다. 

import React, { lazy, Suspense } from 'react';

// 컴포넌트를 lazy를 활용하여 비동기 로딩
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const App: React.FC = () => (
  <div>
    {/* Suspense로 비동기 로딩 중에 fallback UI 표시 */}
    <Suspense fallback={<div>로딩중...</div>}>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    </Suspense>
  </div>
);

export default App;

React.memo란?

우리는 컴포넌트를 동기적, 비동기적으로 로딩하여 사용하게 된다. 이때 특정 컴포넌트가 동일한 props로 여러 번 렌더링될 때 React는 기본적으로 매번 렌더링을 수행한다. 이를 방지하기 위해 React.memo를 사용하게 된다. React.memo를 사용하면 props가 변경되지 않은 경우 이전 렌더링 결과를 재사용하여 재렌더링을 건너뛰게 된다. 이 과정을 컴포넌트 최적화라고 한다. 

import React from 'react';

const ReactMemo = ({ value }) => {
  console.log('MyComponent 렌더링');
  return <div>{value}</div>;
};

// React.memo를 통해 props가 변경되지 않으면 재렌더링을 방지한다.
export default React.memo(ReactMemo);