현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

React 최적화 함수

1. useMemo() : 함수 호출 결과를 저장

useMemo는 계산된 값을 메모이제이션(memoization) 하여, 의존성이 바뀌지 않으면 동일한 값을 재사용하게 하는 훅이다. 렌더링 시마다 불필요한 계산을 줄이는 데 유용하다.

const result = useMemo(() => heavyCalculation(a, b), [a, b]);

2. useCallback() : 함수를 저장

useCallback은 함수를 메모이제이션 하여, 의존성이 바뀌지 않으면 동일한 함수 객체를 유지하게 하는 훅이다. 주로 자식 컴포넌트에 props로 함수를 넘길 때 불필요한 렌더링을 방지하는 데 사용된다.

const handleClick = useCallback(() => {
  console.log("clicked");
}, []);

3. memo() : 컴포넌트를 저장

memo는 props가 바뀌지 않으면 컴포넌트를 리렌더링하지 않도록 하는 고차 컴포넌트이다. 함수형 컴포넌트를 감싸서 불필요한 렌더링을 방지하는 데 사용된다.

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

4. 리액트 생명주기 메서드와 함수형 컴포넌트 생명주기

1) 리액트 생명주기 메서드

• constructor()
  컴포넌트가 생성될 때 가장 먼저 호출되는 메서드이다.

• render()
  UI를 그리는 메서드로, 반드시 정의되어야 하는 메서드이다.

• componentDidMount()
  컴포넌트가 처음 DOM에 마운트된 직후 한 번 호출되는 메서드이다.

• componentDidUpdate(prevProps, prevState)
  컴포넌트가 리렌더링되고 난 후 호출되는 메서드로, 이전 props나 state와 비교하여 처리할 수 있다.

• componentWillUnmount()
  컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드이다.

2) 함수형 컴포넌트 생명주기

함수형 컴포넌트에서는 위 생명주기 메서드를 직접 사용할 수 없으며, 대신 훅(hook)을 이용하여 생명주기를 관리한다.

• useEffect(() => {}, [])
componentDidMount와 유사하게 동작하며, 컴포넌트가 마운트된 직후 한 번 실행되는 훅이다.

• useEffect(() => {...}, [deps])
componentDidUpdate처럼 의존성 배열이 변경될 때마다 실행되는 훅이다.

• useEffect(() => { return () => {...} }, [])
componentWillUnmount처럼 컴포넌트가 언마운트되기 전 정리(clean-up) 작업을 수행할 수 있는 훅이다.

5. React Developer Tools

React Developer Tools를 활용한 React 애플리케이션 성능 최적화

1) React Developer Tools 설치 및 기본 설정

• Chrome 검색창에 React Dev Tools 검색
  

• React Developer Tools - Chrome 웹 스토어
  

• Chrome에 추가
  

• 설치(확장 프로그램 추가)
  
  

• 개발자 도구에 components 탭 추가 됨
  

• General에 Highlight updates when components render
  어디가 리렌더링 되는지 초록색으로 깜빡거리면서 알려준다.
  

• Profiler 탭을 이용한 성능 분석
  Profiler: 성능 측정에 사용돼요 (필요시 사용).