Week 5. React - useMemo, useCallback, 생명주기, 배열 key 설정

1. useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명해 주세요.

 

useMemo와 useCallback이란?

• useMemo: 리액트 훅으로, 값이 변경될 때마다 함수의 결과를 재계산하지 않고, 특정 값이 변경될 때만 해당 값(메모이제이션된 값)을 재계산하여 캐싱함.
  • 사용법: useMemo(() => 계산할 값, [의존성 배열])
  • 용도: 복잡한 계산이나 비용이 큰 연산의 결과를 메모이제이션하여 불필요한 재계산을 방지.
• useCallback: 리액트 훅으로, 함수가 다시 생성되지 않도록 함수 자체를 메모이제이션함.
  • 사용법: useCallback(콜백 함수, [의존성 배열])
  • 용도: 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 재사용하여 불필요한 렌더링 방지 및 하위 컴포넌트에 전달하는 콜백 함수를 최적화.

useMemo와 useCallback의 사용 사례

• useMemo 사용 사례:
  • 무거운 연산이 반복될 때: 복잡한 계산이나 배열/객체를 생성하는 과정이 자주 반복되는 경우, useMemo를 사용하여 이전 결과를 재사용.
  • 컴포넌트가 렌더링될 때마다 반복적으로 계산이 발생하는 경우: 예를 들어, 필터링, 정렬 등의 작업을 할 때.
• useCallback 사용 사례:
  • 하위 컴포넌트에 콜백 함수 전달 시: 컴포넌트가 리렌더링될 때마다 동일한 콜백 함수가 새로 생성되지 않도록 하기 위해.
  • React.memo와 함께 사용: 컴포넌트의 불필요한 렌더링을 방지하기 위해 자주 사용하는 패턴.

남용할 경우 발생할 수 있는 문제점

• 복잡성 증가: useMemo와 useCallback을 과도하게 사용하면 코드가 복잡해지고, 가독성이 떨어질 수 있음.
• 성능 저하: useMemo와 useCallback은 메모이제이션을 통해 성능을 최적화하지만, 사용되는 메모리와 CPU를 요구함. 특히, 의존성 배열이 제대로 관리되지 않으면 오히려 성능이 저하될 수 있음.
• 의존성 관리 문제: useMemo와 useCallback을 사용할 때 의존성 배열을 잘못 설정하면, 필요한 시점에 값이 갱신되지 않거나, 불필요하게 값이 재계산될 수 있음.
• 과도한 최적화: 성능에 큰 이점이 없는 경우에도 useMemo와 useCallback을 사용하는 것은 오히려 성능 저하와 개발자 시간 낭비로 이어질 수 있음.

결론

• 적절한 사용: 성능 최적화가 필요한 경우에만 useMemo와 useCallback을 사용.
• 의존성 배열 관리: 사용 시 의존성 배열을 정확히 관리하여 예상하지 못한 리렌더링을 방지.
• 불필요한 남용 방지: 필요하지 않은 곳에서는 사용을 피하여 코드의 간결성과 가독성을 유지.

 

 

 

2. 리액트 생명주기(life cycle)에 대해 설명해 주세요.

리액트 생명주기(Lifecycle)란?

리액트 컴포넌트는 **생명주기(Lifecycle)**를 가집니다. 이는 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 의미합니다. 리액트는 이 생명주기 동안 특정 메서드를 호출하여 컴포넌트의 상태나 동작을 제어할 수 있게 합니다.

리액트 생명주기는 크게 세 가지 단계로 나뉩니다:

1. 마운트(Mounting)
2. 업데이트(Updating)
3. 언마운트(Unmounting)

각 단계에는 특정한 메서드가 있으며, 이 메서드들은 함수형 컴포넌트와 클래스형 컴포넌트에서 다르게 사용됩니다.

리액트 생명주기 단계와 주요 메서드

1. 마운트(Mounting)

컴포넌트가 처음으로 DOM에 삽입되는 단계입니다.

• 클래스 컴포넌트 메서드
  • constructor(): 컴포넌트가 생성될 때 호출되며, 초기 상태(state)를 설정하거나 props를 초기화할 때 사용.
  • static getDerivedStateFromProps(props, state): props가 변경될 때 state를 업데이트하기 위해 사용. (드물게 사용됨)
  • render(): 컴포넌트의 UI를 렌더링하며, JSX를 반환.
  • componentDidMount(): 컴포넌트가 마운트된 직후에 호출됨. DOM 조작, API 호출 등 초기화 작업에 사용.
• 함수형 컴포넌트 훅(Hook)
  • useEffect(() => {...}, []): 빈 배열을 의존성으로 전달하면, 컴포넌트가 마운트될 때만 한 번 실행됨. componentDidMount와 유사한 역할.

2. 업데이트(Updating)

컴포넌트의 상태(state)나 props가 변경될 때 발생하는 단계입니다.

• 클래스 컴포넌트 메서드
  • static getDerivedStateFromProps(props, state): 새로운 props를 받았을 때 state를 업데이트하기 위해 호출.
  • shouldComponentUpdate(nextProps, nextState): 컴포넌트가 리렌더링될지 여부를 결정하기 위해 호출. true 또는 false를 반환.
  • render(): 상태나 props가 변경될 때마다 호출되어 UI를 갱신.
  • getSnapshotBeforeUpdate(prevProps, prevState): DOM이 실제로 변경되기 직전에 호출되어, DOM 변경 전 상태를 기록할 수 있음.
  • componentDidUpdate(prevProps, prevState, snapshot): 업데이트가 DOM에 반영된 후 호출. 추가 작업(ex. 데이터 요청)을 할 때 사용.
• 함수형 컴포넌트 훅(Hook)
  • useEffect(() => {...}, [dependencies]): dependencies 배열에 포함된 값이 변경될 때마다 실행. componentDidUpdate와 유사한 역할.

3. 언마운트(Unmounting)

컴포넌트가 DOM에서 제거되는 단계입니다.

• 클래스 컴포넌트 메서드
  • componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 직전에 호출. 정리 작업(ex. 타이머 제거, 네트워크 요청 취소)에 사용.
• 함수형 컴포넌트 훅(Hook)
  • useEffect(() => {... return () => { cleanup } }, []): 클린업 함수가 컴포넌트가 언마운트되기 직전에 호출됨. componentWillUnmount와 유사한 역할.

생명주기 메서드 사용 사례

• 마운트 시 초기화 작업: componentDidMount나 useEffect를 사용해 API 호출, 이벤트 리스너 설정 등 초기 작업을 수행.
• 업데이트 시 최적화: shouldComponentUpdate를 사용해 불필요한 리렌더링을 방지하거나, useEffect의 의존성 배열로 최적화를 수행.
• 언마운트 시 정리 작업: componentWillUnmount나 useEffect의 클린업 함수를 사용해 이벤트 리스너 제거, 네트워크 요청 취소 등 정리 작업을 수행.

함수형 컴포넌트와 클래스 컴포넌트의 생명주기 차이

• 함수형 컴포넌트: useEffect, useMemo, useCallback과 같은 훅을 사용해 생명주기 메서드를 대체.
• 클래스 컴포넌트: 생명주기 메서드를 통해 보다 명확하게 각 단계에서의 작업을 정의.

결론

리액트의 생명주기는 컴포넌트의 상태나 속성에 따라 변하는 UI를 관리하기 위해 중요합니다. 생명주기 메서드와 훅을 적절하게 사용하여 성능을 최적화하고, 애플리케이션의 복잡성을 관리할 수 있습니다.

 

3. React에서 배열을 렌더링할때 key를 설정해야 하는 이유와 key 설정 시 주의할 점

 

배열 렌더링 시 key를 설정해야 하는 이유

• 효율적인 렌더링: key를 사용해 리액트가 변경된 항목만 업데이트하여 성능 최적화.
• 정확한 변경 감지: key를 통해 항목의 추가, 삭제, 순서 변경을 정확히 감지.
• 컴포넌트 상태 유지: 올바른 key 설정으로 컴포넌트의 상태(state)를 정확히 유지.

key 설정 시 주의할 점

• 고유한 값 사용:
  • 각 항목을 고유하게 식별할 수 있는 값 사용 (예: 데이터베이스 ID).
  • 고유하지 않은 key 사용 시, 렌더링 오류나 성능 저하 발생 가능.
• 배열의 인덱스 사용 주의:
  • 인덱스를 key로 사용하는 것은 항목의 순서가 변하지 않는 경우에만 적합.
  • 인덱스를 사용할 경우, 항목 추가/삭제/순서 변경 시 불필요한 재렌더링 발생 위험.
• 안정적인 값 사용:
  • 렌더링 중 변하지 않는 값 사용 (랜덤 값이나 시간 등은 피해야 함).
  • 불안정한 값 사용 시, 불필요한 렌더링이 발생할 수 있음.
• 형제 간 고유성 보장:
  • 같은 부모 컴포넌트 내에서 key는 고유해야 함.
  • 리스트 내에서는 중복되지 않도록 주의 (다른 리스트 간 중복 가능).

요약

• key는 리스트의 항목을 고유하고 안정적으로 식별하는 값이어야 함.
• 인덱스 사용은 제한적으로, 고유하고 안정적인 값을 사용하는 것이 최선.
• key 설정이 적절하지 않으면 불필요한 렌더링과 성능 문제를 초래할 수 있으므로 주의해서 설정해야 함.

 

(참고) useMemo, useCallback, useState, useEffect의 연관성

• useState:
  • 상태(state)를 관리하기 위한 리액트 훅.
  • 컴포넌트의 상태를 정의하고, 상태가 변경될 때마다 컴포넌트를 리렌더링.
  • 사용 예: [state, setState] = useState(initialValue) 형태로 상태와 상태 변경 함수를 제공.
• useEffect:
  • **부수 효과(side effects)**를 처리하기 위한 리액트 훅.
  • 데이터 fetching, 구독(subscription), 타이머 설정 등 컴포넌트가 마운트/업데이트/언마운트될 때 실행되는 코드를 정의.
  • 사용 예: useEffect(() => { effect }, [의존성])으로 의존성 배열에 따라 효과 실행.
• useMemo:
  • 비용이 큰 계산의 결과를 메모이제이션(캐싱)하여 불필요한 재계산을 방지.
  • 컴포넌트가 리렌더링될 때마다 재계산하지 않고, 의존성 배열의 값이 변경될 때만 재계산.
  • 사용 예: useMemo(() => 계산식, [의존성])으로 성능 최적화.
• useCallback:
  • 함수의 재생성을 방지하기 위한 리액트 훅.
  • 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방지하고, 동일한 함수 참조를 유지.
  • 사용 예: useCallback(() => 함수내용, [의존성])으로 콜백 함수 메모이제이션.

이들의 연관성

• 상태 관리와 부수 효과 처리 (useState, useEffect):
  • useState는 상태를 관리하고, 상태 변경 시 컴포넌트가 리렌더링됨.
  • useEffect는 상태나 props 변경 시 발생하는 부수 효과(예: 데이터 가져오기, DOM 조작)를 처리.
• 렌더링 최적화 (useMemo, useCallback):
  • useMemo는 복잡한 계산을 메모이제이션하여 리렌더링 시 불필요한 재계산 방지.
  • useCallback은 함수 재생성을 방지하여, 자식 컴포넌트로 전달되는 함수로 인해 발생하는 불필요한 렌더링 방지.
• 전체 흐름:
  • **상태 관리 (useState)**가 변화하면, 컴포넌트는 리렌더링되고, **부수 효과 (useEffect)**가 실행됨.
  • 이때, 성능 최적화를 위해 **메모이제이션 (useMemo, useCallback)**을 활용하여 계산과 함수 재생성을 줄여 효율적인 렌더링을 유지.

이 훅들을 함께 사용하면 리액트 컴포넌트의 상태 관리, 부수 효과 처리, 렌더링 성능을 모두 최적화할 수 있습니다.